﻿html {
    background-color: #FFF;
    margin: 0;
    padding: 0;
}

body {
	font-family: Arial, sans-serif;
	background-color: #FFF;
    color: #333;
    font-size: 1.1em;
    font-family: 'Open Sans', Arial, sans-serif, "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
	min-width: 280px;
}

a {
    color: #FFF;
    outline: none;
    text-decoration: none;
}

.content {
	max-width: 767px;
	margin-left: auto;
	margin-right: auto;
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
	/* Styles */
	.content {
		max-width: 320px;
	}
}

.slicknav_menu {
	margin-left: auto;
	margin-right: auto;
}

.the900 {
	font-weight: bold;
    font-family: 'Open Sans', Arial, sans-serif, "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

/* colours */
.darkgreen {
	background-color: #3A7381;
}

.lightgreen {
	background-color: #96CBD8;
}

.grey {
	background-color: #EDEDED;
}

.mediumgrey {
	background-color: #C3C3C3;
}

.darkgrey {
	background-color: #8B8B8B;
}

h1, h2, h3,
h4, h5, h6 {
    color: #3A7381;
    margin-bottom: 0;
    padding-bottom: 0;
	font-weight:normal;
	text-align: center;
	font-family: 'Open Sans', Arial;
}

#advanced-hair-clinic h2 {
	margin-top: 1%;
	margin-bottom: 4%;
}

#logo {
	max-width: 60%; 
	float:left;
}

#ba-male .before {
	/* background-image: url('/mobile/images/male-before.jpg'); */
	/*width: 200px;*/
}

.before img {
	/*z-index: 2;
	position: relative;*/
	display: block; 
}

#ba-female .before {
	/* background-image: url('/mobile/images/female-before.jpg'); */
	/*width: 200px;*/
}

.before {
	background-repeat: no-repeat;
	overflow: hidden;
}

.after,
.before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.before {
  z-index: 10;
}

#banner,
#banner img {
	padding: 0;
}

#banner img {
	width: 100%;
	display: block;
}

#intro {
	background-color: #D2DADD; /* #988A7D; */
}

#advanced-hair-clinic h1,
#before-and-after h1 {
	padding: 3% 0%;
	margin: 0;
}

#ahc-book p {
	padding-top: 2%;
	padding-bottom: 4%;
}

.consult {
	background-color: #96CBD8;
	color: #FFF;
	margin: 0;
}

.consult-grey {
	background-color: #EDEDED;
	color: #3A7381;
	margin: 0;
}

.consultation-grey,
.consultation,
.enquire-holder {
	font-size: 1.6em;
	text-align:center;
	clear:both;
}

.enquire-holder {
	padding: 4% 4%;
}

.consultation-grey,
.consultation {
	padding: 5% 5%;
}

.consultation-grey p,
.consultation p {
	padding: 0 0 1% 0;
	margin: 0 0 0 0;
}

.btn-mf, 
.enquire {
	color: #FFF;
	font-weight: bold;
	background-color: #3A7381;
	text-transform: uppercase;
	text-align:center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	margin-top: 4%;
	margin-bottom: 4%;
}

.enquire {
	font-size: 0.8em;
	padding: 4% 1%;
	width:90%;
	margin-left: auto;
	margin-right: auto;
}

#ba-male,
#ba-female {
	text-align: center;
	margin-top: 2%;
	position: relative;
	width: 280px;
	height: 328px;	
	margin-left: auto;
	margin-right: auto;
}

#ba-male img,
#ba-female img {
	width: 280px;
	height: 328px;	
}

#ba-male img,
#ba-female img,
#before-after-male,
#before-after-female {
	margin-left: auto;
	margin-right:auto;
	text-align:center;
	/*width: 200px;*/
}

#orientation {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	text-align:center;
}

.btn-mf {
	font-style: italic;
	font-size: 1.3em;
	width: 35%;
	margin: 0 auto;
	display: inline-block;
	padding: 1% 3% 1% 1%;
	margin: 6% 3%;
}

#advanced-hair-clinic img {
	width: 100%;
	display: block;
}

#treatment {
	padding-bottom: 3%;
}

#treatment,
.passage {
	padding-left: 4%;
	padding-right: 4%;
}

#about-us p {
	margin-bottom: 0;
}

#testimonial ul li,
#treatment ul li { 
	display: inline; 
}

.btn-off {
	background-color: #96CBD8;
}

#hair-loss-treatments {
	background: -webkit-linear-gradient(#FFF 10%, #EDEDED);
	background: -o-linear-gradient(#FFF 10%, #EDEDED);
	background: -moz-linear-gradient(#FFF 10%, #EDEDED);
	background: linear-gradient(#FFF 10%, #EDEDED);
}

#testimonials {
	background-color: #EDEDED;
}

#testimonials h1 {
	padding-top: 3%;
	margin: 0;
}

#hair-loss-treatments div,
#testimonials div {
	text-align: center;
}

#testimonial div {
	font-style:italic;
	line-height: 150%;
}

#testimonials div ul,
#hair-loss-treatments div ul {
	padding: 0;
	margin-top: 0;
}

#testimonials div ul li,
#hair-loss-treatments div ul li {
	padding-left: 2%;
	padding-right: 2%;
}

#treatment div {
	text-align:center;
}

#treatment div img {
	width: 100%;
}

#treatment div p {
	margin-top: 0;
}

#testimonial div p:last-child {
	color: #3A7381;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.3em;
}

#testimonial {
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 3%;
}

#ahc-call, 
#about-us-call,
#about-us-call h3 {
	padding-top: 0%;
}

#consultation .enquire input[type="submit"],
#consultation .enquire input[type="image"] {
	font-size: 1em;
	background-color:transparent;
	background-image: none;
	border:none;
	border-color:transparent;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
    text-align: center;
	cursor:pointer;
}

#consultation input {
    font-family: 'Open Sans', Arial, sans-serif, "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

#consultation .message-error {
	display:block;
	color: #FF0000;
	font-weight:bold;
}

#about-us .enquire-holder h3 {
	margin: 0;
}

#ahc-call h3 {
	margin-top: 2%;
	font-size: 1.1em;
}

#about-us .passage img {
	width: 100%;
	margin-top: 2%;
}

#about-us-call h3 {
	padding-top: 0%;
	margin-top: 0%;
	padding-bottom: 2%;
}

#about-us h1 {
	padding-bottom: 3%;
	padding-top: 3%;
	margin:0;
}

#about-us .enquire {
    font-size: 1em;
}


#follow-us h3 {
	padding: 1%;
	margin: 0;
}

#follow-us img {
	width: 44px;
	margin: 2%;
}

#locations {
	background-color: #96CBD8;
}

#locations #sites {
	padding: 0% 0% 2% 0%;
	margin-bottom: 0;
}

#locations #location {
	padding: 0% 4% 2% 4%;
	margin-bottom: 0;
}

#locations #sites,
#locations #site {
	min-height: 200px;
}

#locations #sites p {
	margin-top: 0;
}

#locations,
#locations h1 {
	color: #FFF;
}

#locations h1 {
	margin: 0;
	padding-top: 4%;
	padding-bottom: 3%;
}

#locations .enquire {
	margin-top: 0;
}

#consultation {
	padding: 3% 4%;
}

#consultation h1 {
	margin: 0;
}

#free-consultation {
	padding-top: 2%;
}

input[type="text"] {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #96CBD8;
	border-left: none;
	width: 90%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-size: 1.2em;
	font-weight:normal;
	color: #8B8B8B;
}

#locations div ul {
	list-style-type: none;
}

#locations #site {
	background: left no-repeat url("/mobile/images/marker.jpg");
	background-position: 0px 19px;
	padding-left: 35px;
	word-wrap: break-word;
}

#locations #site strong:first-child {
	line-height: 250%;
	font-size: 1.3em;
}

#locations #site .larger {
	color: #FFF;
	font-size: 1.2em;
}
#locations #site iframe {
	width: 100%;
	/*max-width: 280px;  368px; */
	height: 18em;
	background-color: rgb(229, 227, 223);
}

#locations #site small {
	display: none;
}

#locations #site small a,
#locations #site iframe {
	margin-left: -35px;
}

#footer ul {
	text-align:center;
	padding: 5% 0;
	margin: 0;
	list-style-type: none;
}

#footer ul li {
	padding-top: 1%;
	padding-bottom: 1%;
	font-size: 1.2em;
}

#switch div {
	color:#FFF;
	text-align:center;
	padding: 2% 0 1% 0;
}

#switch div p:first-child {
	margin-top: 4%;
}

#switch div a {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
}

#switch p:last-child {
	font-size: 0.8em;
	margin-top: 0;
}

#hair-loss-treatments h1 {
	padding-top: 2%;
	padding-bottom: 1%;
	margin:0;
}

ul.slick-dots li.slick-active button {
	background: top left no-repeat url('/mobile/images/bubble-on.jpg');
}

ul.slick-dots li button {
	background-color: #CCC;
	background: top left no-repeat url('/mobile/images/bubble-off.jpg');
	color: transparent;
	border: 0 none;
	min-height: 30px;
	min-width: 30px;
}

.hidden {
	display: none;
}

#locations #sites ul {
	/*width:100%; */
	overflow:hidden;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
}

#locations #sites li {
	float:left;
	width:50%;
	list-style: outside disc url('/mobile/images/pin.jpg');
	margin: 0 0 2% 0;
	padding: 0 0 0 0;
}
#locations #sites li a {
	position:relative;
	top:-1px;
	left:0;
	font-size: 0.9em;
}