/* typography */
body{
	color:#fff;
	font-family: 'ConduitITCStd-Medium', Arial, Helvetica, sans-serif; 
	font-size:20px;
	font-weight:normal;

}
h1 {
	font-weight:normal;
	font-size: 20px;
	color: #fff;
	font-family:'ConduitITCStd-Medium', Arial, Helvetica, sans-serif; 
	padding: 10px 10px 0px 20px;
	text-transform: uppercase;
    letter-spacing: 0.1em
}


h2{
	font-weight:normal;
	font-family:'ConduitITCStd-Light', Arial, Helvetica, sans-serif; 
	font-size: 40px;
	color: #fff;
	padding: 0px 10px 10px 20px;
    letter-spacing: 0.05em

} 

h3{
	font-weight:normal;
	font-family:'ConduitITCStd-Light', Arial, Helvetica, sans-serif; 
	font-size: 15px;
	color: #fff;
	padding: 0px 0px 0px 20px;

} 

h3.new-label1{
	padding: 10px 0px 0px 20px;

} 

  
/* RESPONSIVE IMAGES */
img { 
	max-width:100%; 
	height:auto;
	position: relative;
	padding: 10px;
}


body{
	background:#333;

}



/* STRUCTURE */

a {
	text-decoration: none;
}

.label {
    text-decoration: none;
}


#pagewrap {
	width: 846px;
	margin: 0px auto;
}

header {
	height: 100px;
	margin: 50px 0 0 0;
	text-align: center;
}

#content {
	width: 260px;
	height: 390px;
	margin: 70px 0px 0px 15px;
	float: left;
}

#content:hover a h1.new-label span{
  display: none;
}

#content:hover a h1.new-label:after{
  content: 'Visit Website';
}

#content:hover {
	background: url(../images/basic-pic1.jpg);

}

#middle {
	width: 260px;
	height: 390px;
	margin: 70px 15px 0px 15px;
	float: left;

}

#middle:hover a h1.new-label span{
  display: none;
}

#middle:hover a h1.new-label:after{
  content: 'Visit Website';
}

#middle:hover {
	  	background: url(../images/basic-pic2.jpg);

}


#sidebar {
	width: 260px;
	height: 390px;
	margin: 70px 15px 40px 0px;
	float: left;
}


#sidebar:hover {
	background: #fff;
}

#sidebar:hover h1 span{
	display: none;
}

#sidebar:hover h1:after{
  content: 'Roastery';
  color: #000;
}

#sidebar:hover a h2.new-label span{
	display: none;
}

#sidebar:hover a h2.new-label:after{
  content: '73 Crown St Richmond VIC 3121';
  color: #000;
}

#sidebar:hover h3.new-label1 span{
	display: none;
}

#sidebar:hover h3.new-label1:after{
  content: 'T +61 3 9428 3229';
  color: #000;
}

#sidebar:hover h3.new-label2 span{
	display: none;
}

#sidebar:hover h3.new-label2:after{
  content: 'F +61 3 9428 5880';
  color: #000;
}

#sidebar:hover a h3.new-label3 span{
	display: none;
}

#sidebar:hover a h3.new-label3:after{
  content: 'info@clarkstroasters.com.au';
  color: #000;
}

#sidebar:hover a h3.new-label4 span{
	display: none;
}

#sidebar:hover a h3.new-label4:after{
  content: 'PRESS ENQUIRIES';
  color: #000;
}


footer {
	text-align: center;
	margin: 0px;

}




#content, #middle, #sidebar {
	border: solid 1px #fff;

}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 865px) {
	
	#pagewrap {
		width: 610px;
		margin: 0px auto;
	}	

	header {
		width: 90%;
		margin-left: auto;
        margin-right: auto;

	}

	#content {
		width: 180px;
		height: 270px;
		margin: 70px 0px 0px 15px;
		float: left;
	}
	
	#middle {
		width: 180px;
		height: 270px;
		margin: 70px 15px 0px 15px;
		float: left;
	}
	
	#sidebar {
		width: 180px;
		height: 270px;
		margin: 70px 15px 40px 0px;
		float: left;
	}

	h1 {
		font-weight:normal;
		font-size: 11px;
		color: #fff;
		padding: 10px 10px 0px 20px;
		text-transform: uppercase;
	}


	h2{
		font-weight:normal;
		font-size: 27px;
		color: #fff;
		padding: 0 20px;
	} 

	h3{
		font-weight:normal;
		font-size: 11px;
		color: #fff;
		padding: 0px 20px;
	} 

	h3.new-label1{
		padding: 10px 20px 0;
	}

}

/* for 700px or less */
@media screen and (max-width: 600px) {



	#pagewrap {
		width: 450px;
		margin: 0px auto;
	}	

	header {
	height: 100%;
	width: 100%;
	margin: 50px 0 20px 0;
	text-align: center;


	}

	
	#sidebar, #middle, #content {
		width: 400px;
        width: 450px;
		margin: 20px 0px 0px 0px;
        padding-bottom: 15px;
		float: left;
	}

	#content:hover {
		background: url(../images/basic-pic3.jpg) no-repeat;
        background-size: cover;

	}
	#middle:hover {
		background: url(../images/basic-pic4.jpg) no-repeat;
                background-size: cover;


	}

	footer {
		width: 450px;
		float: left;
		text-align: center;
		margin: 40px 0 0 0;
	}

	h1 {
	   font-size: 20px;
		padding: 10px 10px 0px 20px;
	}


	h2{
		font-size: 36px;
		padding: 0px 10px 0px 20px;

	} 

	h3{
		font-weight:normal;
		font-size: 12px;
		padding: 0px 0px 0px 20px;

	} 

	h3.new-label1{
		padding: 0px 0 0 20px;
	}


}

/* for 480px or less */
@media screen and (max-width: 480px) {



	#pagewrap {
		width: 300px;
		margin: 0px auto;
	}	

	header {
	height: 100%;
	width: 100%;
	margin: 50px 0 20px 0;
	text-align: center;


	}

	#content {
		width: 300px;
		height: 220px;
		margin: 20px 0px 0px 0px;
		float: left;
	}
	
	#middle {
		width: 300px;
		height: 220px;
		margin: 20px 0px 0px 0px;
		float: left;
	}
	
	#sidebar {
		width: 300px;
		height: 220px;
		margin: 20px 0px 0px 0px;
        padding-bottom: 30px;
		float: left;
	}

	footer {
		width: 300px;
		float: left;
		text-align: center;
		margin: 40px 0 0 0;
	}

	h1 {
		font-weight:normal;
		font-size: 16px;
		color: #fff;
		padding: 10px 10px 0px 20px;
	}


	h2{
		font-weight:normal;
		font-size: 28px;
		color: #fff;
		padding: 0px 10px 0px 20px;

	} 

	h3{
		font-weight:normal;
		font-size: 12px;
		color: #fff;
		padding: 0px 0px 0px 20px;

	} 

	h3.new-label1{
		padding: 0px 0 0 20px;
	}

}