::-moz-selection, ::selection {
	background-color:rgba(150,150,150,.1);
}
* {
	font-family:"BPreplay";
}
body {
	margin:0;
	padding:0;
}

.damion {
	font-family:"Damion";
}
p a:link, p a:visited,
label a:link, label a:visited {
    color: #222;
    text-decoration: none;
    border-bottom: solid 1px #222;
}
p a:hover,
label a:hover {
    color: #000;
    border-bottom-color: #000;
}
.footer p a:link, .footer p a:visited,
#contact label a:link, #contact label a:visited,
#contact p a:link, #contact p a:visited {
	color: #555;
	border-bottom-color: #555;
}
.footer p a:hover, #contact label a:hover, #contact p a:hover {
	color: #888;
	border-bottom-color: #888;
}
h1, h2, h3, h4, h5, h6 {
	color:#111111;
	font-weight:normal;
	text-transform:uppercase;
}
h1.damion, h2.damion, h3.damion, h4.damion, h5.damion, h6.damion,
.title_header h1 { text-transform:none; }
h2 {
	font-size:28px;
	    margin: 30px 0 20px;
	text-align:center;
	width:100%;
}
h3 {
	font-size:23px;
}

#windowwidth { /* A div that media queries and JS can use to talk to each other about the width of the browser window. */
    width:1920px;
    height: 0;
    display: none;
}

	.block {
		box-sizing:border-box;
		display:block;
		position:relative;
		height:auto;
		margin:0 auto;
		max-width:1400px;
		overflow:hidden;
		width:100%;
	}
	
	.block.content {	/* Content of the page, contains the text etc. of the page, on non-indexes pages. */
		max-width:1100px;
		padding-bottom:100px;
	}
		.title_header {
			background-repeat:no-repeat;
			background-position:50% 50%;
			background-size:cover;
			height:300px;
			margin:0 auto 30px;
			position:relative;
			width:100%;
		}
		
		.packagespage .title_header { background-image:url(../images/packagesheader.jpg); }
		.responsivepage .title_header { background-image:url(../images/responsiveheader.jpg); }
		.termspage .title_header { height:80px; }
		.seopage .title_header { background-image:url(../images/seoheader.jpg); }
		.socialmediapage .title_header { background-image:url(../images/socialmediaheader.jpg); }
		.timingpage .title_header { background-image:url(../images/timingheader.jpg); }
		.wordpresspage .title_header { background-image:url(../images/wordpressheader.jpg); }
		.shoppage .title_header { background-image:url(../images/shopheader.jpeg); }
		.bendigopage .title_header { background-image:url(../images/bendigoheader.jpg); }
		.contactpage .title_header { background-image:url(../images/contactheader.jpg); }
		.aboutpage .title_header { background-image:url(../images/aboutheader.jpg); }
		.productspage .title_header { background-image:url(../images/products.jpg); background-position:50% 70%; }
		.smallbusinesspage .title_header { background-image:url(../images/smallbusinessheader.jpg); }
		.tradiepage .title_header { background-image:url(../images/tradieheader.jpg); }
		.writerpage .title_header { background-image:url(../images/writerheader.jpg); background-position: 50% 10%; }
		.hospitalitypage .title_header { background-image:url(../images/hospitalityheader.jpg); background-position: 50% 70%; }
		.commercepage .title_header { background-image:url(../images/commerceheader.jpg); }
		.marketingpage .title_header { background-image:url(../images/marketingheader.jpg); }
		
			.title_header h1  {position:absolute; bottom:0; left:30px; }
			.packagespage .title_header h1,
			.wordpresspage .title_header h1,
			.bendigopage .title_header h1,
			.shoppage .title_header h1,
			.productspage .title_header h1,
			.smallbusinesspage .title_header h1,
			.writerpage .title_header h1, 
			.tradiepage .title_header h1, 
			.hospitalitypage .title_header h1,
			.commercepage .title_header h1, 
			.marketingpage .title_header h1 { color:#FFF; }
			
			.smallbusinesspage .title_header h1, .hospitalitypage .title_header h1, .commercepage .title_header h1, .marketingpage .title_header h1 { text-shadow: 1px 1px 3px #333;}
		
		
		.block.content p {
		    width: 95%;
		    margin-left: auto;
		    margin-right: auto;
		}
		
		.message {
			background-color:transparent;
			box-sizing:border-box;
			border:3px solid #EEE;
			height:auto;
			margin:0 auto 20px;
			overflow:hidden;
			padding:10px;
			text-align:center;
			width:95%;
		}
		.message_href:link,
		.message_href:visited {
			text-decoration:none;
			color:inherit;
			overflow:hidden;
			display:block;
			margin-top:100px;
		}
		.message_href:link .message:hover,
		.message_href:visited .message:hover {
			background-color:#EEE;
		}
		.alert {
			height:auto;
		}


	/* ========================================== */
	/* MENU */
	/* ========================================== */
	.menu {
		display:block;
		position:relative;
		top:0;
		width:100%;
		height:90px;
		line-height:90px;
		margin-bottom:30px;
		color:#555555;
		background-color:#222222;
		/*background-color:rgba(10,10,10,.8);*/
		z-index:1000;
	}
	.homepage .menu { position:fixed; }
		.menuLogo {
			display:block;
			position:relative;
			float:left;
			width:220px;
			background-image:url(../images/macleodwebdesignlogo.png);
			background-repeat:no-repeat;
			background-position:center center;
			background-size:60%;
			height:100%;
		}
		.responsiveMenuButton {
			width:60px;
			height:100%;
			position:relative;
			float:right;
			background-repeat:no-repeat;
			background-position:center center;
			background-image:url(../images/responsive.png);
			background-size:40px 40px;
			display:none;
			cursor:pointer;
		}
		.menuLogo:hover {
			background-color:rgba(10,10,10,.2);
		}
		.menuItems {
			position:relative;
			float:right;
			width:auto;
			overflow:hidden;
			height:100%;
		}
			.menuItem, .menuItem:link, .menuItem:visited {
				display:block;
				position:relative;
				float:left;
				width:auto;
				height:100%;
				padding:0 25px;
				text-align:center;
				color:#888888;
				text-decoration:none;
				background:transparent;
				border-right:1px solid #222222;
				font-size:18px;
			}
			.menuItem:hover {
				color:#CCCCCC;
				cursor:pointer;
				background-color:rgba(10,10,10,.2);
			}
			.responsiveCloseMenu {
				position:relative;
				width:100%;
				height:40px;
				background-repeat:no-repeat;
				background-position:center center;
				background-image:url(../images/responsive_close.png);
				background-size:76px 20px;
				display:none;
				cursor:pointer;
			}
			.responsiveCloseMenu:hover {
				background-color:rgba(10,10,10,.2);
			}

	
	/* ------- Block 1 --------- */
	#standout {
		background-image:url(../images/bg.jpg);
		background-position:50% 100%;
		background-repeat:no-repeat;
		background-size:cover;
		height:900px;
		max-width:100%;
	}
	.termspage #standout, 
	.packagespage #standout,
	.productspage #standout,
	.responsivepage #standout,
	.seopage #standout,
	.socialmediapage  #standout,
	.timingpage #standout,
	.wordpresspage #standout,
	.shoppage #standout,
	.bendigopage #standout,
	.contactpage #standout,
	.aboutpage #standout,
	.smallbusinesspage #standout, 
	.tradiepage #standout, 
	.writerpage #standout, 
	.hospitalitypage #standout, 
	.commercepage #standout, 
	.marketingpage #standout { background-image:url(../images/strip.jpg); height:8px; background-position:50% 50%; margin-bottom:0; }
		
		#standout h1, #standout h2 {
			box-sizing:border-box;
			color:#FFF;
			font-weight:normal;
			margin:0;
			padding:0 20px;
			position:absolute;
			text-align:center;
			width:100%;
		}
		#standout h1 {
			font-size:80px;
			margin-top:-58.5px;
			top:50%;
		}
		#standout h2 {
			font-size:22px;
			margin-top:38px;
			top:50%;
		}
	
	#scrolldown {
		display: none;
	}
	.homepage #scrolldown {
		background: url(../images/scrolldown.png) 50% 50% no-repeat;
		background-size: contain;
			/* When using sprite */
			/*background-image:url(../images/sprite.png);
			background-repeat:no-repeat;
			background-position:0 91.25%;
			background-size: 133.333333%;
			margin: 0 auto 0;
			width: 151px;
			height: 28px;*/
		bottom: 3.5%;
		display: block;
		/*margin: 0 40%;*/
		outline:none;
		position: absolute;
		width: 20%;
		height: 15px;
		opacity: 0.5;
	}
	
	/* ------- Block 2 --------- */
	#whywebsite {
		margin-top:80px;
	}
		.reasons, .majorreason {
			height:auto;
			margin-top:130px;
			overflow:hidden;
			width:100%;
		}
		.majorreason {
			margin-top:50px;
		}
			.reason {
				float:left;
				margin:0 3%;
				width:27.33332%;
			}
				.reason h4, .reason h2 {
					font-size:15px;
					margin: 15px 0 0;
					text-align:center;
				}
				.reason h2 {
					font-size:65px;
					margin:0;
				}
				.majorreason .reason {
					width:94%;
				}
					.majorreason .damion { font-size:75px; margin:0 20px; }
					.majorreason .rule {
						width: 30%;
						border-bottom: 1px solid #DDD;
						margin:100px auto 0;
					}
				
	/* ------- Block 3 --------- */
	.breaker {
		background:no-repeat center center url(../images/breaker.png);
		background-size:contain;
			/* When using sprite */
			/*background-image:url(../images/sprite.png);
			background-repeat:no-repeat;
			background-position:0 88.6875%;
			background-size: 133.333333%;
			width: 151px;
			height: 28px;*/
		margin: 150px auto 0;
		position:relative;
		display: block;
		width: 20%;
		height: 15px;
	}
	
	/* ------- Block 4 --------- */
	
	#benefitsofwebsite {
		background-image:url(../images/website-design-bendigo-victoria.jpg);
		background-position:50% 40%;
		background-repeat:no-repeat;
		background-size:cover;
		height:700px;
		max-width:100%;
		margin:120px auto 0;
	}
		#benefitsofwebsite .overlay {
			background: rgba(0,0,0,.7);
			/*background: -moz-linear-gradient(left,  rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 30%);
			background: -webkit-linear-gradient(left,  rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%);
			background: linear-gradient(to right,  rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%);*/
			position:absolute;
			width:100%;
			height:100%;
		}
		#benefitsofwebsite p {
			cursor:default;
			color:#FFF;
			margin:30px 0 0 15%;
			position:relative;
			width:70%;
			font-size: 23px;
			text-shadow: 0 3px 7px #333;
			text-align:center;
		}
		#benefitsofwebsite p:nth-child(2) { margin-top:270px; } /* The first paragraph, but the second item in the #benefitsofwebsite div. */
		#benefitsofwebsite p:last-child { margin-top:50px; }
	
	/* ------- Block 5 --------- */
	#whatwecando {
		margin-top:120px;
	}
		.packages {
			height:auto;
			margin:50px auto 0;
			overflow:hidden;
			max-width:1200px;
			width:100%;
		}
			.package {
				background-color:#FFFFFF;
				box-sizing:border-box;
				border:2px solid rgb(217,217,217);
				float:left;
				height:auto;
				margin:0 0.75%;
				padding:0 10px;
				position:relative;
				text-align: center;
				width:18.5%;
			}
				.package_header {
				    height: 100px;
				    width: 100%;
				    margin: 10px auto;
				    background-repeat: no-repeat;
				    background-position: center center;
				    background-size: cover;
				}
				.package.tradie .package_header { background-image:url(../images/tradie.jpg); }
				.package.writer .package_header { background-image:url(../images/writer.jpg); }
				.package.smallbusiness .package_header { background-image:url(../images/smallbusiness.jpg); }
				.package.hospitality .package_header { background-image:url(../images/hospitality.jpg); }
				.package.commerce .package_header { background-image:url(../images/commerce.jpg); }
				.package.marketing .package_header { background-image:url(../images/marketing.jpg); }
				.package h3 {
					font-size: 20px;
				}
				.package h4 {
					font-size: 18px;
				}
				.package a:link, .package a:visited {
					border-bottom:none;
					color:rgb(7, 113, 201);
					text-decoration:none;
				}
			.packagespage .packages_wrap {
				overflow:hidden;
				position:relative;
				margin-top:40px;
			}
				/*.packagespage .package {
					box-sizing:border-box;
					margin:40px 2.5%;
					padding:0 10px 20px;
					width:45%;
				}
					.packagespage .package_header {
						height:200px;
					}
					.packagespage .package h3 {
						font-size:30px;
					}*/
			.packagespage .package {
				width: 15.166666666666666666666666666667%;
			}
		
	
	/* ------- Block 6 --------- */
	#portfolio {
		margin-top:100px;
	}
		.works {
			height:auto;
			margin-top:30px;
			overflow:hidden;
			width:100%;
		}
			.work {
				float:left;
				margin:40px 3% 0;
				width:44%;
			}
			
				.QuantumSlide a:link, .QuantumSlide a:visited {
					text-decoration:none;
					color:inherit;
					cursor:pointer;
				}
				.QuantumSlide:hover .overlay {
					background: rgba(0,0,0,.5);
				}
					
						.bendigocoffeeman  { background-image:url(../images/bendigocoffeeman.jpg); }
						.gpobendigo { background-image:url(../images/GPO.jpg); }
						.grataespresso { background-image:url(../images/grataespresso.jpg); }
						.petcarers { background-image:url(../images/petcarers.png); }
						
						.work_logo {
							background-position:50% 50%;
							background-repeat:no-repeat;
							background-size:contain;
							height:20%;
							margin:0 0 0 1.5%;
							position:absolute;
							top:2.5%;
							width:20%;
						}
							.bendigocoffeeman .work_logo { background-image:url(../images/bendigocoffeeman_logo.png); }
							.gpobendigo .work_logo { background-image:url(../images/GPO_logo.png); }
							.grataespresso .work_logo { background-image:url(../images/grataespresso_logo.png); }
							.petcarers .work_logo { background-image:url(../images/petcarers_logo.png); top:10%; height:80%; }
						.QuantumSlide .overlay {
							background: rgba(0,0,0,.5);
							position:absolute;
							width:100%;
							height:100%;
							/*display:none;*/
						}
						.petcarers .overlay { background: rgba(0,0,0,0); }
					.QuantumSlide .slidetext {
						display:block;
						position:absolute;
						width:95%;
						margin:0 2.5%;
						overflow:hidden;
						height:auto;
						bottom:0;
						text-shadow: 0px 1px 3px #000;
						text-align:left;
					}
						.QuantumSlide h5 {
							margin:0;
							font-size:16px;
							font-weight:bold;
							color:#FFF;
							display:inline-block;
						}
						.QuantumSlide h5:hover { color:rgb(247, 123, 8); text-decoration:underline; }
						.QuantumSlide.petcarers h5:hover { color:#111; }
						
						.QuantumSlide p {
							margin-top: 6px;
							font-size:14px;
							color:#FFF;
						}
		
	
	/* ------- Block 7 --------- */
	
	#about {
		width: 92%;
		margin: 100px auto 0;
	}
				
		.avatar {
			float: left;
			margin:0 25px 10px 0;
		}
	
	/* ------- Block 8 --------- */
	#contact  {
		background-color:#222222;
		max-width:100%;
		margin-top:150px;
		padding-top:20px;
	}
			#contact h4, #contact h2 {
				color:#FFF;
				font-size:15px;
				margin:0 0 5px;
				text-align:center;
			}
			#contact h2 {
				font-size:70px;
				margin:0;
			}
			
			.contact_top {
				margin:30px 1.5% 90px;
				width:97%;
			}
			.contact_left {
				color:#878686;
				float:left;
				margin:20px 3% 20px 15%;
				text-align:center;
				width:32%;
			}
			
				#ajax-contact {
					height:auto;
					overflow:hidden;
				}
					#name, #email, #message, #submit {
						font-weight:normal;font-size:18px;outline:none;display:block;width:100%;margin:0 auto 20px;box-sizing:border-box;border:1px solid rgb(65,65,65);background-color:transparent;padding:5px 15px;color:rgb(85,85,85);
					}
					#phone, #phone:link, #phone:visited {
						position:relative;
						height:auto;
						color:#555555;
						font-size:16px;
						margin: 15px 10px 15px 0;
						float: right;
						border: 1px solid rgb(65,65,65);
						padding: 5px 15px;
						cursor:pointer;
						text-decoration: none;
					}
					#name:hover, #name:focus, #email:hover, #email:focus, #message:hover, #message:focus, #phone:hover, #phone:focus {
						border-color:rgb(85,85,85);
						color:rgb(115,115,115);
					}
					#name, #email {
						float:left;width:48.75%;
					}
					#email {
						margin-left:2.5%;
					}
					#message {
						resize:none;height:150px;margin-bottom:0;float:left;
					}
					#submit {
						cursor:pointer;color:rgb(85,85,85);font-size:16px;width:auto;float:right;margin-top:15px;margin-bottom:0;
					}
					#submit:hover, #submit:focus {
						border:1px solid #090;color:#090;
					}
					#terms {
						float:left;margin-top:10px;
					}
					#terms_label {
						color:#555555;font-size:16px;margin-left:10px;float:left;margin-top:10px;
					}
					#name::-webkit-input-placeholder, #email::-webkit-input-placeholder, #message::-webkit-input-placeholder {
						color:rgb(65,65,65);
					}
					#name:-moz-placeholder, #email:-moz-placeholder, #message:-moz-placeholder {
						color:rgb(65,65,65);opacity:1;
					}
					#name::-moz-placeholder, #email::-moz-placeholder, #message::-moz-placeholder {
						color:rgb(65,65,65);opacity:1;
					}
					#name:-ms-input-placeholder, #email:-ms-input-placeholder, #message:-ms-input-placeholder {
						color:rgb(65,65,65);
					}
					#form-messages {
						height:auto;width:auto;float:left;padding:7px 20px;margin:10px auto 30px;color:#FFF;font-size:16px;
					}
					.success {
						background-color:#468847;
					}
					.error {
						background-color:#b94a48;
					}
			
			.contact_middle {
				display:none;
				/*color:#878686;
				float:left;
				margin:0 1.5% 20px;
				text-align:center;
				width:30.3333%;*/
			}
			.contact_right {
				color:#878686;
				float:right;
				margin:0 15% 20px 3%;
				text-align:center;
				width:32%;
			}
				
				#map { /* For use with the google maps api rather than iframe. */
					/*height:500px;*/
					position:relative;
					padding-bottom:40%;
					height:0;
					overflow:hidden;
				}
		
		
	.footer {
		background-color:#1c1c1c;
		height:70px;
		overflow:hidden;
		padding:0 2.5%;
		width:95%;
	}
		
		.macleodwebdesignlogo {
			background:no-repeat center center url(../images/macleodwebdesignlogo.png);
			background-size:contain;
				/*background-image:url(../images/sprite.png);
				background-position:0 28.487995%;
				background-size: 100%;*/
			    display: block;
				float: left;
				width: 100px; /* Relationship between width and height must be the same as the ratio of the logo image (since we are using a sprite) */
				height: 40px;
				margin: 15px 20px 0 0;
			opacity:0.8;
		}
		.footer_fb {
			display:block;
			float:left;
			position:relative;
			height:30px;
			width:30px;
			margin-top:20px;
			
			float: right;
			margin-left: 20px;
			border-bottom:none;
			background-image:url(../images/fb.png);
			background-repeat:no-repeat;
			background-position:center center;
			background-size:30px 30px;
				/* When using sprite */
				/*background-image:url(../images/sprite.png);
				background-repeat:no-repeat;
				background-position:0 95.544239%;
				background-size: 400%;*/
		}
			.footer_fb:hover {
				background-image:url(../images/fb_hover.png);
					/* When using sprite */
					/*background-image:url(../images/sprite.png);
					background-repeat:no-repeat;
					background-position:0 100%;
					background-size: 400%;*/
				border-bottom:none;
			}
			.footer_fb:link, .footer_fb:visited {
				border-bottom:none;
			}
		.footer p {
			position:relative;
			line-height:73px;
			float:right;
			font-size:14px;
			color:#555;
			height:auto;
			margin:0;
		}
		#footer_copyright {
			margin-right:50px;
		}
		
		
		.contactpage #ajax-contact {
			width: 70%;
			margin:50px auto 0;
		}
		.contactpage #map, .bendigopage #map {
			margin-top:30px;
		}
		.contactpage #form-messages {
			float:none;
			width:70%;
		}
		
		.productspage .products_wrap {
			overflow:hidden;
			position:relative;
		}
		.product {
			width: 19%;
			box-sizing: border-box;
			float: left;
			margin: 30px 0.5%;
			border:2px solid rgb(217,217,217);
			padding: 0 15px;
		}
			.product h3 {
				font-size: 20px;
				text-align: center;
			}
			.product h4 {
				font-size:16px;
				text-align: center;
				color: #777;
				border-top: 1px solid #DDD;
				padding-top: 10px;
				margin-top: 0;
			}
.feature_lists {	/* On the small business page. */
	margin:50px auto 0;
	overflow:hidden;
	width:90%;
	border:2px solid rgb(249, 213, 152);
	box-sizing: border-box;
}
	.feature_lists h2 { font-size:50px; text-align:center; color:rgb(186, 127, 93); }
		.feature_dollarsign { font-size:22px; vertical-align:top; margin-right: 10px; }
	.feature_header {
		text-align:center;
		background:rgb(249, 213, 152);
		padding:10px 0;
		color:#A06543;
		font-weight:600;
		text-transform:uppercase;
	}
	.feature_list {
	    margin: 0 auto;
	    overflow:hidden;
	}
		.the_feature {
			overflow: hidden;
			border-top:1px solid #E0E0E0;
		}
			.the_feature h5 {
			    margin-left: 2.5%;
			    font-size: 15px;
			    font-weight: 600;
			    margin-bottom: 0;
			}
			.the_feature p {
			    color: #555;
			}
		/*
		.the_feature:hover p, .the_feature:hover h5 { color:#FFF; }
		
		#feature_list_left .the_feature:nth-child(1):hover { background:rgba(249, 213, 152, 1); }
		#feature_list_left .the_feature:nth-child(2):hover { background:rgba(186, 127, 93, 1); }
		#feature_list_left .the_feature:nth-child(3):hover { background:rgba(112, 106, 90, 1); }
		#feature_list_left .the_feature:nth-child(4):hover { background:rgba(70, 74, 84, 1); }
		
		#feature_list_middle .the_feature:nth-child(1):hover { background:rgba(15, 11, 45, 1); }
		#feature_list_middle .the_feature:nth-child(2):hover { background:rgba(70, 74, 84, 1); }
		#feature_list_middle .the_feature:nth-child(3):hover { background:rgba(112, 106, 90, 1); }
		#feature_list_middle .the_feature:nth-child(4):hover { background:rgba(186, 127, 93, 1); }
		#feature_list_middle .the_feature:nth-child(5):hover { background:rgba(249, 213, 152, 1); }
		
		#feature_list_right .the_feature:nth-child(4):hover { background:rgba(249, 213, 152, 1); }
		#feature_list_right .the_feature:nth-child(5):hover { background:rgba(186, 127, 93, 1); }
		#feature_list_right .the_feature:nth-child(1):hover { background:rgba(112, 106, 90, 1); }
		#feature_list_right .the_feature:nth-child(2):hover { background:rgba(70, 74, 84, 1); }
		#feature_list_right .the_feature:nth-child(3):hover { background:rgba(15, 11, 45, 1); }
		*/
		
@font-face {
    font-family: 'BPreplay';
    src: url('../fonts/bpreplay/bpreplay.eot');
    src: url('../fonts/bpreplay/bpreplay.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bpreplay/bpreplay.woff2') format('woff2'),
         url('../fonts/bpreplay/bpreplay.woff') format('woff'),
         url('../fonts/bpreplay/bpreplay.ttf') format('truetype'),
         url('../fonts/bpreplay/bpreplay.svg#bpreplay') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Damion';
    src: url('../fonts/damion/damion.eot');
    src: url('../fonts/damion/damion.eot?#iefix') format('embedded-opentype'),
         url('../fonts/damion/damion.woff2') format('woff2'),
         url('../fonts/damion/damion.woff') format('woff'),
         url('../fonts/damion/damion.ttf') format('truetype'),
         url('../fonts/damion/damion.svg#damion') format('svg');
    font-weight: normal;
    font-style: normal;
}


@media all and (min-width:1000px) and (max-width:1330px) {
	#windowwidth {width:1330px;}
	#benefitsofwebsite p:nth-child(2) { margin-top: 320px; }
	#benefitsofwebsite p { font-size:20px; }
	.reason {
		margin:0 1%;
		width:31.33332%;
	}
		.reason h2 { font-size:55px; }
		
		
	.work p { min-height:32px; }
	.work .img { background-size:cover; }
	#about { width:94%; margin-left:3%; margin-right:3%; }
		
}


@media all and (min-width:821px) and (max-width:999px) {
	#windowwidth {width:999px;}
	.menuItem, .menuItem:link, .menuItem:visited { padding:0 15px; font-size:15px; }
	#benefitsofwebsite p { font-size:20px; }
	#benefitsofwebsite p:nth-child(2) { margin-top: 300px; }
	.reason {
		margin:0 1%;
		width:31.33332%;
	}
		.reason h2 { font-size:45px; }
	
	
		.work .img { background-size:cover; }
		
	#about { width:94%; margin-left:3%; margin-right:3%; }
	
	.macleodwebdesignlogo { /*display:none;*/ }
	.contact_left, .contact_right {
		float:none;
		margin:30px 5% 90px;
		width:90%;
	}
	
}


@media all and (min-width:1px) and (max-width:820px) {
	#windowwidth {width:820px;}
	.menu { margin-bottom:0; }
		.responsiveMenuButton { display:block; }
		.menuLogo { width:150px; }
		.menuItems { position:absolute; top:90px; width:100%; background:#111; height:auto; overflow:hidden; display:none; }
			.menuItem, .menuItem:link, .menuItem:visited { width:70%; margin:10px 15%; float:none; height:80px; border:none; line-height:normal; height:auto; padding:20px 0; }
	.title_header { height:150px; }
	
	#standout h1 {font-size:60px;}
	#standout h2 {font-size:25px; margin-top:16px;}
	h2 { font-size:30px; }
	#whywebsite {width:90%; margin-left:5%; margin-right:5%; margin-top:40px;}
	#benefitsofwebsite { height:500px; margin-top:20px; }
		#benefitsofwebsite .overlay { display:block; }
		#benefitsofwebsite p { width:80%; margin-right:10%; margin-left:10%; font-size:20px; }
		#benefitsofwebsite p:nth-child(2) { margin-top: 200px; }
		#benefitsofwebsite p:last-child { margin-top: 30px; }
	.reasons { margin-top:0px; }
		.reason, .majorreason .reason {
			margin:0 1% 50px;
			width:98%;
			padding-bottom:50px;
			border-bottom:solid 1px #EEE;
		}
		.reason { margin-top:10px; }
		.majorreason { margin-top:30px; }
			.reason h2 { font-size:45px; }
			.reason h4 { font-size:16px; }
			.majorreason .damion { font-size:60px; display: block; margin-bottom: 35px; }
			.majorreason .rule { margin-top:70px; }
		.rule {display:none;}
	.breaker { display:none; }
	#whatwecando { margin-top:40px; }
		.package, .packagespage .package { width:80%; margin:15px 10%; }
		
	.contact_left, .contact_right {
		float:none;
		margin:30px 5% 90px;
		width:90%;
	}
		.contact_left p, .contact_right p {font-size:18px;}
	#portfolio { margin-top:40px; }
		.work { width:80%; margin-left:10%; margin-right:10%; }
			.work .img { background-size:cover; height:130px; }
	
	#about { width:80%; margin-left:10%; margin-right:10%; margin-top:40px; }
		#about p {font-size:18px;}
	#contact { margin-top:100px; }
		#contact h2 {font-size:45px;}
		.macleodwebdesignlogo { margin: 30px auto 0; float: none; }
		#name, #email, #message, #phone { border-color: rgb(85,85,85); color: rgb(115,115,115); }
	.footer { height:auto; }
		.footer p {
			float:none;
			line-height:normal;
		}
			#footer_copyright {
				display:block;
				margin:30px 5%;
				text-align:center;
			}
			#footer_terms { margin-left:40px; }
			.footer_fb { margin:0 40px 20px 20px; }
}

/* iPad portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (max-width:769px) {
	#windowwidth { width:768px; }
	.package, .packagespage .package {
		width: 45%;
		margin: 15px 2.5%;
	}
	#standout { height:940px; }
}
/* iPad landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (min-width:1023px) {
	#windowwidth { width:1024px; }

	#standout { height:400px; }
}


/* iPhone 6 landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
	#windowwidth { width:667px; }
}
/* iPhone 6 portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
	#windowwidth { width:375px; }
	
	#standout { height: 510px; }
}



/* iPhone 6 Plus landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
	#windowwidth { width:736px; }
}
/* iPhone 6 Plus portrait */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
	#windowwidth { width:414px; }
}



/* iPhone 5S, 5 landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
	#windowwidth { width:568px; }
}
/* iPhone 5S, 5 portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
	#windowwidth { width:320px; }
	#standout { height: 510px; }
}



/* iPhone 2G, 3G, 4, 4S landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
	#windowwidth { width:480px; }
}
/* iPhone 2G, 3G, 4, 4S portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
	#windowwidth { width:320px; }
	#standout { height: 430px; }
}