/* Mobile CSS */
@media screen and (max-width: 640px ) {

/* Hide and show standard and mobile logo */
.logo img {
	display:none;
}
.logo-mobile img {
	display:block;
	width:100px;
	margin:10px auto 10px auto !important;
}
	

/* Images within content */
.col-100 img {
	max-width:100%;
	float:none;
	clear:both;
	margin:5% auto;
}
.col-50 img {
	max-width:100%;
	float:none;
	clear:both;
	margin:5% auto;
}
.col-60 img {
	max-width:100%;
	float:none;
	clear:both;
	margin:5% auto;
}
.col-30 img {
	max-width:100%;
	float:none;
	clear:both;
	margin:5% auto;
}
.col-20 img {
	max-width:100%;
	float:none;
	clear:both;
	margin:5% auto;
}

    
/*--------------------------------------------------------------------------------------------------------
												Hero banner and background-slideshow
/*------------------------------------------------------------------------------------------------------*/

#full-width-banner {
	width:100%;
	margin:0 auto;
	background:url('images/banner-bg.jpg');
	background-position:center center;
	background-size:cover;
}

#banner-container {
	position:relative !important;
	margin: 0 auto !important;
	max-width: 960px;
}

#banner-container img {
	/* The following three lines will horizontally and vertically centre an image inside of its parent container */
	position: relative !important;
	margin:50px auto 0 auto !important;
	padding:0 !important;
	max-height: 600px !important; line-height: 600px !important;
}

/*--------------------------------------------------------------------------------------------------------
												
/*------------------------------------------------------------------------------------------------------*/

.mobile-scroll-top {
	display:block;
}
.mobile-scroll-top img {
	width:5%;
}

/* Contact button */
#contact-button {
	display:none;	
}
#contact-button-mobile {
	display:block;
	position:fixed;
	z-index:2;
	top:0;
	right:14px;
	width:40px;
	height:35px;
	background:#555555;
	border-bottom-right-radius:0.7em;
	border-bottom-left-radius:0.7em; 	
}
#contact-button-mobile img {
	position:relative;
	width:60%;
	margin:15% 20%;
}
#contact-button-mobile a {
	display:block;
}

/* Social Media Icons */
.social-icon img {
	max-width:8%;
    display: block;
	float:left;
	clear:both;
	margin:0.2em 1em 0.2em 0 !important;
}
.social-icon li {
    line-height: 2.6em !important;
}

/* Generic global class, where once applied, will hide class element in desired view only */
.hide-mobile {
	display:none !important;
}
.show-mobile {
	display:block !important;
}

/*--------------------------------------------------------------------------------------------------------
												Containers / Wrappers
/*------------------------------------------------------------------------------------------------------*/

.col-60 {
	max-width:100%;
	float:none;
	margin:2% 0 2% 0;
	padding:0;
}
.col-50 {
	max-width:100%;
	float:none;
	margin:2% 0 2% 0;
	padding:0;
}

.col-30 {
	min-width:48%;
	max-width:100%;
	margin:2% 2% 2% 0;
	padding:0;
}
    
.col-20 {
	min-width:48%;
	max-width:100%;
	margin:2% 2% 2% 0;
	padding:0;
}

.box {
	max-width:100% !important;
	min-width:80% !important;
	margin-right:5% !important;
	/* Other values are inherited from style.css */
}


/*--------------------------------------------------------------------------------------------------------
												Typography
/*------------------------------------------------------------------------------------------------------*/

h1 {
	font-size:37px !important;
}
h2 {
	font-size:27px !important;
}
h3 {
	font-size:20px !important;
}
p, ol, ul, td, th {
	font-size:18px;
	font-weight:300;
	color:#222222;
}




}