@charset "UTF-8";

@import url('../css/fontello.css');


/* CLEARFIX */
/** *  For modern browsers */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/** * For IE 6/7 (trigger hasLayout) */
.cf { *zoom:1; }

body {
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	font-size:12px;
	color:#797979;
	margin:0px;
}

.content-bg {
	background-image:url(../images/bg-content.jpg); 
	background-repeat:repeat-x;
}

img { max-width: 100%; height: auto; }

p {
	font-family:Georgia, "Times New Roman", Times, serif;
	line-height:20px;
	font-size:14px;
}

.small-line { height: 17px; padding-top: 20px; background: url(../images/small-line.gif) no-repeat center 20px; }
	.small-line hr { display: none; }

td {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #666;
}

@font-face {
	font-family: 'hob';
	src: url('fonts/hob.eot?#iefix') format('embedded-opentype'), 
	     url('fonts/hob.woff') format('woff'), 
	     url('fonts/hob.ttf')  format('truetype'),
	     url('fonts/hob.svg#svgFontName') format('svg');
}

h1 {
	font-family:"hob", Georgia, Helvetica, sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-top:0px;
	color:#b51d19;
	
}

h2 {
	font-family:"hob", Georgia, Helvetica, sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:0px;
	color:#fff;
	
}

h3 {
	font-family:"hob", Georgia, Helvetica, sans-serif;
	font-size:30px;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:0px;
	color:#000;
	
}

h4 {
	font-family:"hob", Georgia, Helvetica, sans-serif;
	font-size:24px;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:0px;
	color:#000;
	
}

.price {
	font-family:"hob", Georgia, Helvetica, sans-serif;
	font-size:22px;
	color:#fff;
	text-align:right;
}

#container {
	margin-left:auto;
	margin-right:auto;
	max-width:960px;
}

.header {
	padding:20px;
}
.header:after { clear: both; content: ""; display: table; }

.header .logo { float: left; }

.nav-toggle { display: none; }

.nav-dismiss { display: none; }

.nav-links {
	margin-top:52px;
	/*float:right;*/	
	margin-left:auto;
	margin-right:auto;
	padding-top:12px;
}

.nav-links ul {
	margin:0px;
}

.nav-links li {
	display:inline-block; white-space: nowrap;
}

.nav-links li
{
	list-style: none;
	/*padding-right:35px;*/
	padding-left: 20px;
	font-family:"hob", Georgia, Helvetica, sans-serif;
	letter-spacing:1px;
	font-size:22px;
}

.nav-links li a
{
	color: #fff;
	text-align: center;
	text-decoration: none
}

.nav-links li a:hover
{
	color: #999;
	text-align: center;
	text-decoration: none
}

.nav-links li.active a {
	color: #FFC;
}

.intro-txt {
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:right;
	line-height:20px;
	font-size:14px;
}

.font {
	font-family:"hob", Georgia, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:22px;
	padding-top:20px;
	text-align:center;
}

.treatments {
	text-transform:uppercase;
	max-width:520px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding-top:20px;
	color:#999;
	font-family:Arial, Helvetica, sans-serif;	
}

.col {
	color:#000;
	letter-spacing:1px;
}

.footer {
	clear: both;
	background: url(../images/line-big.jpg) no-repeat center top;
	padding-top: 30px;
	margin-left:auto;
	margin-right:auto;
}

.footer ul {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	text-align: left;
	list-style: none;
}
.footer li {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 20px 20px;
	text-align: left;
}

.footer-txt {
	text-transform:uppercase;
	text-align:center;
	letter-spacing:7px;
	font-size:10px;
	padding-top:15px;
	padding-bottom:20px;
	font-family:Arial, Helvetica, sans-serif;
}

.details {
	text-transform:uppercase;
	line-height:18px;
	font-size:10px;
}

#content {
	background-color:#FFF;
	padding:20px;
}

.column {
	float:right;
	width:200px;
	background-color:#fff;
	border-left:#e6e6e6 1px solid;
	margin-left:10px;
}

.with-column { margin-right: 220px; }

.foot {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}

.home-panels { max-width: 920px; }
	.home-panels ul { margin: 0; padding: 0; list-style: none; }
	.home-panels ul:after { clear: both; content: ""; display: table; }
		.home-panels li { display: inline-block; width: 180px; margin: 0 0 30px; padding: 0; }
		
.social-btn {
    font-size: 18px;
    color: #FFF;
    background: #4267b2;
    display: inline-block;
    border-radius: 3px;
    height: 24px;
    width: 30px;
    text-align: center;
    padding-top: 6px;
}
.social-btn:hover {
	background: #365899;
}

#home-image {
	position: relative;
}
	#home-image a {
		position: absolute;
		top: 0;
		bottom: 15%;
		right: 0;
		width: 30%;
	}
	

/* VOUCHERS PAGE */

.voucher-purchase { background-color:#fcefcf; padding:20px; border:#ecd273 solid 1px; margin-right: 220px; }


/* TREATMENTS/BOOKINGS PAGE */

#price-list { margin: 0 0 30px; font-size: 16px; }
	#price-list .price-list-img { box-sizing: border-box; float: right; width: 33.33333333%; padding-left: 30px; text-align: right; }
	#price-list .price-list-img.left { float: left; }
	#price-list h2 { margin: 40px 0 20px; color: #b51d19; text-transform: uppercase; }
	#price-list h3 { margin: 40px 0 20px; }
	#price-list p { width: 66.66666666%; margin: 0 0 20px; }
	#price-list table { width: 66.66666666%; margin: 20px 0; background: #F9F9F9; padding: 15px; border-spacing: 0; border-collapse: separate; }
		#price-list table th, #price-list table td { border-bottom: 1px solid #E0E0E0; vertical-align: top; text-align: left; }
		#price-list table tr:last-child th, #price-list table tr:last-child td { border-bottom: 0; }
		#price-list table td { padding: 5px; }
		#price-list table td:nth-child(2) { text-align: right; font-weight: bold; }
	#price-list .price-group-note { font-style: italic; color: #999; }
	
.phorest { width: 100%; height: 900px; height: 950px; border: solid 1px #999; border-radius: 4px; }

		
/* CONTACT FORM */

#contact p, label, legend { font: 1.0em Arial, sans-serif; font-weight:bold; }

#contact h1 {font-family:"hob", Georgia, Helvetica, sans-serif; font-size: 24px; letter-spacing:0px; 
color:#b51d19; font-weight:normal; }
#contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #ecd273; border-style: none none solid; }

#contact { display: block; max-width: 440px; margin: 0px; margin-bottom:20px; padding: 5px; border: 0px solid #ecd273;  -webkit-border-radius:5px;  }

/* Form style */

#contact label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 155px; font-size: 1.0em; -webkit-border-radius:5px; }
#contact input, textarea, select { width: 280px; margin: 0; padding: 5px; color: #666; background: #fff; border: 1px solid #ecd273; margin: 5px 0; font:1.0em Arial, sans-serif; webkit-border-radius:5px; }   
#contact input:focus, textarea:focus, select:focus { border: 1px solid #999; color:#333; }
#contact input.submit { width: 85px; cursor: pointer; border: 1px solid #ecd273; background:#b51d19; color:#fff; }
#contact input.submit:hover { background:#ccc; }
#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset { padding:20px; border:1px solid #ecd273; -webkit-border-radius:5px; -moz-border-radius:5px; }
#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #ecd273; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }

#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */

#message { margin: 10px 0; padding: 0; }

.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../images/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -webkit-border-radius:5px; }

.loader { padding: 0 10px; }

#contact #success_page h1 { background: url('../images/success.gif') left no-repeat; padding-left:22px; }

.contact-map { padding: 10px; background-color: #fcefcf; }
	.contact-map iframe { width: 100%; color:#0000FF; text-align:left }



/* MEDIA QUERIES */

@media (max-width: 767px) {
	
	html { 	width: 100%; overflow-x: hidden; }
	
		#container {
			position: relative; width: 100%;
			right: 0px;
			transition: right 0.25s ease-in-out;
			-moz-transition: right 0.25s ease-in-out;
			-webkit-transition: right 0.25s ease-in-out;
		}
		.nav-open #container { right: 260px; }
		
			.nav-toggle {
				display: block;
				position: absolute;
				z-index: 1003;
				right: 15px;
				top: 60px;
				font-size: 40px;
				line-height: 1;
			}
				.nav-toggle a {
					color: #FFF;
					text-decoration: none;
				}
			
			.nav-dismiss {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 1002;
				display: none;
			}
			.nav-open .nav-dismiss {
				display: block;
			}
		
			.nav-links {
				position: absolute;
				right: 0px;
				top: 0px;
				width: 0;
				margin: 0;
				padding: 0;
				min-height: 100%;
				background: #333;
				color: #FFF;
				overflow-y: hidden;
				overflow-x: hidden;
				transition: width 0.25s ease-in-out, right 0.25s ease-in-out;
				-moz-transition: width 0.25s ease-in-out, right 0.25s ease-in-out;
				-webkit-transition: width 0.25s ease-in-out, right 0.25s ease-in-out;
			}
			.nav-open .nav-links {
				right: -260px;
				width: 260px;
				overflow-y: visible;
			}
				
				.nav-links ul {
					width: 260px;
					padding: 30px 0;
				}
				
					.nav-links li {
						display: block;
						padding: 0;
						white-space: normal;
					}
				
						.nav-links li a {
							display: block;
							padding: 30px 15px;
							font-weight: bold;
							color: #FFF;
							text-transform: uppercase;
							transition: background 0.1s ease-in-out;
							-moz-transition: background 0.1s ease-in-out;
							-webkit-transition: background 0.1s ease-in-out;
						}
						.nav-links li a:hover, .nav-links li a:active {
							color: #FFF;
							background: #666;
						}
						
		.column { display: none; }
		
		.with-column { margin-right: 0; }
		
		.voucher-purchase { margin-right: 0; }
		
		#price-list .price-list-img { float: none !important; width: auto; padding: 0 !important; text-align: left; }
		#price-list table, #price-list p { width: 100%; }
		#price-list p { width: auto; }
		
		.phorest { height: 850px; }
				
}

@media (max-width: 499px) {
	
	#content img { display: block; margin: 0 0 10px !important; float: none; }
	
}