
.hero {	
	background-repeat: no-repeat;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	}

@media all and (max-width:512px) { .hero { background-image: url('../images/common/clocktowerSmall3.jpg'); background-position: right center; } }
@media all and (min-width:513px) and (max-width:848px) { .hero { background-image: url('../images/common/clocktowerMedium3.jpg'); background-position: right center; } }
@media all and (min-width:849px) { .hero { background-image: url('../images/common/clocktowerLarge3.jpg'); background-position: center center; } }

#hero {
	padding-top: 24px;
	padding-bottom: 24px;
	overflow: hidden;
	
	position: relative;
	}

#hero .welcome {
	width: 100%;
	max-width: 296px;
	color: #ffffff;
	background-color: #282828;
	}

@media all and (max-width:720px) {
	#hero .welcome { height: 192px; }
	#hero .welcome p { /* padding-top: 128px; Coming Soon */ padding-top: 28px; /*  Welcome To Glenferrie Dermatology */ }
	#hero .blurb { height: 192px; margin-top: 24px; }
	#hero .blurb p { padding-top: 24px; }
	}
	
@media all and (min-width:721px) {
	#hero .welcome { min-height: 220px; height: 220px; margin-top: 160px; float: left; clear: none; }
	#hero .welcome p { /* padding-top: 144px; Coming Soon */ padding-top: 57px; margin-bottom: -4px; /* Welcome To Glenferrie Dermatology */ }
	#hero .blurb { min-height: 220px; height: 220px; margin-top: 160px; float: left; clear: none; margin-left: 24px; }
	#hero .blurb p { padding-top: 39px; /* padding-top: 70px; */ }
	}

#hero .welcome p {
	/* LIGHT */
	font-family: 'BrandonGrotesqueLightRegular';
	padding-right: 28px;
	padding-bottom: 28px;
	padding-left: 28px;
	}

@media all and (max-width:392px) {
	/* #hero .welcome p { font-size: 3.2em; line-height: 1.1em; } */
	#hero .welcome p { font-size: 4.2em; line-height: 1.1em; }
	}		

@media all and (min-width:393px) {
	#hero .welcome p { font-size: 4.2em; line-height: 1.1em; }	
	}

#hero .blurb {
	width: 100%;
	max-width: 296px;
	color: #ffffff;
	background-color: #e7540e;
	}

#hero .blurb p {
	/* MEDIUM */
	font-family: 'BrandonGrotesqueLightRegular';
	padding-right: 28px;
	padding-bottom: 28px;
	padding-left: 28px;
	font-size: 1.8em;
	/* font-size: 1.7em;*/
	line-height: 1.2em;	
	}

#home {
	overflow: hidden;
	padding-top: 28px;
	padding-bottom: 28px;
	}

.section {
	overflow: hidden;
	width: 100%;
	max-width: 296px;
	float: left;
	clear: left;	
	}

.section h2 {
	font-family: 'BrandonGrotesqueMediumRegular';
	font-size: 2.0em;
	line-height: 1.0em;
	
	}

.section .underline {
	background-color: #e7540e;
	height: 2px;
	width: 72px;
	margin-top: 8px;

	}

.section p {
	font-family: 'BrandonGrotesqueLightRegular';
	float: left;
	clear: left;
	font-size: 1.6em;
	line-height: 1.0em;
	margin-top: 8px;
	}

#appointmentFees, #clinicHours {
	padding-top: 28px;
	margin-top: 28px;
	border-top: 1px solid #e5e5e5;
	}

/** COLOURS **/

/** FOOTER BACKGROUND #202020 **/

/** ORANGE #e7540e **/

/** YELLOW #f6b221 **/

/** GREY WRITING #6f6f6e **/

/**  PALE GREY #f8f8f8 **/	



.rightTwoThirds {
	margin-left: 320px;
	overflow: hidden;
	}


.centreImage {
	float: left;
	clear: left;
	width: 100%;
	max-width: 296px;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	
	background-repeat: no-repeat;	
	}
	
#topSmall {
	background-image: url('../images/home/office1.jpg');
	}

#middleSmall {
	background-image: url('../images/home/office2.jpg');
	}

#bottomSmall {
	background-image: url('../images/home/familySmall.jpg');
	}

#rightTall {
	background-image: url('../images/home/familyLarge.jpg');
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: 320px;
	}

@media all and (max-width:600px) {
	
	#bottomSmall, #middleSmall, #topSmall  { display: none; }
	
	}

@media all and (max-width:860px) {
	
	#rightTall { display: none; }
	
	.centreImage {height: 176px; background-position: center center;}
	
	#middleSmall, #bottomSmall { margin-top: 24px; }
	
	}
	
@media all and (min-width:861px) {
	
	.centreImage { height: 210px; background-position: center center; }
	
	#middleSmall { margin-top: 24px; }
	
	#bottomSmall { display: none; }
	
	#rightTall { height: 444px; }
	
	}	
	
