/* Stylesheet: ws-styles.css Modified On 2026-10-27 11:25:18 */
/*###################################################*/
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap');
/*##################  RESET  ########################*/
/*###################################################*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	overflow-x: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*###################################################*/
/*##############  MAIN STRUCTURE  ###################*/
/*###################################################*/
body {
	font-family: "Sunflower", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 26px;
	/* Sunflower only has 300 / 500 / 700. The design's "Regular" and "Medium" text is 500 (verified by
	   measuring text widths); "SemiBold" styles are set to 700 explicitly below. */
	font-weight: 500;
	color: #212b32;
	background-color: #f3f3f3;
	/* Full-width bands (match the Sketch homepage):
	   white header 0-86, navy rule 86-89, nav bar 89-140,
	   blue feature band 140-742 (runs 26px below the feature card, which ends at 716),
	   testimonial band 742-826 with a rule at the bottom */
	background-image: linear-gradient(to bottom,
		#ffffff 0, #ffffff 86px,
		#002750 86px, #002750 89px,
		#7f93ab 89px, #7f93ab 140px,
		#e2edf7 140px, #e2edf7 742px,
		#cecece 742px, #cecece 743px,
		#ffffff 743px, #f3f3f3 826px,
		#d1cfd0 826px, #d1cfd0 827px,
		#f3f3f3 827px);
	background-repeat: no-repeat;
}

/* Inner pages have no testimonial: the blue band just runs 26px below the feature card (166-716). */
body:not(.home) {
	background-image: linear-gradient(to bottom,
		#ffffff 0, #ffffff 86px,
		#002750 86px, #002750 89px,
		#7f93ab 89px, #7f93ab 140px,
		#e2edf7 140px, #e2edf7 742px,
		#f3f3f3 742px);
}

/* Templates without a feature card (the questionnaire): no blue band behind the content. */
body.no-feature {
	background-image: linear-gradient(to bottom,
		#ffffff 0, #ffffff 86px,
		#002750 86px, #002750 89px,
		#7f93ab 89px, #7f93ab 140px,
		#f3f3f3 140px);
}

/* Type styles (Sketch "Type Styles"): desktop sizes, mobile overrides at the end of the file */
h1, h2, h3, h4 {
	color: #14314f;
}

h1 {
	margin: 0 0 22px 0;
	padding: 0;
	font-size: 38px;
	line-height: 46px;
	letter-spacing: -0.9px;
	font-weight: 700;
}

h2 {
	margin: 0 0 18px 0;
	padding: 0;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -0.5px;
	font-weight: 700;
}

h3 {
	margin: 0 0 14px 0;
	padding: 0;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: -0.3px;
	font-weight: 700;
}

h4 {
	margin: 0 0 12px 0;
	padding: 0;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}

h5 {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
	font-weight: 700;
	color: #002750;
}

h6 {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 2.4px;
	font-weight: 700;
	text-transform: uppercase;
	color: #7b8794;
}

p {
	margin: 0 0 24px;
	padding: 0;
	font-size: 15px;
	line-height: 26px;
}

p.top {
	margin: 12px 0;
	padding: 0;
}

strong, b {
	font-weight: 700;
}

em {
	margin: 0;
	font-size: 1.0em;
	line-height: inherit;
	color: inherit;
	font-style: italic;
	font-weight: normal;
}

a {
	color: #3d3d3d;
	text-decoration: none;
}

a:hover {
	color: #002750;
	text-decoration: underline;
}

/* Links inside page content and the sidebar: blue + underline so they stand out from body text.
   #4F6A89 is the menu's hover blue darkened to pass WCAG AA (5.0:1 on the page, 5.6:1 on white cards);
   the underline is needed as well because no blue is 3:1 against the body text. The designer's spec had
   #3D3D3D with no underline, which is nearly indistinguishable from the text. */
#content a:not(.button), #sidebar a {
	color: #4f6a89;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#content a:not(.button):hover, #sidebar a:hover {
	color: #002750;
	text-decoration-thickness: 2px;
}

.left {
	float: left;
}

.right {
	float: right;
}

img.left {
	padding: 5px;
}

img.right {
	padding: 5px;
}

/* Content images floated left with an inline style (Profile > Personal): space between image and text.
   (Not img.right: that class is also used for images floated to the right.) */
#content img[style*="float: left"] {
	margin-right: 20px;
}

.clearBoth {
	width: 100%;
	height: 0;
	clear: both;
}

hr {
	color: #ebe9e9;
	background-color: #ebe9e9;
	border-bottom: 1px solid white;
	margin: 10px 0 20px 0;

}

#container {
	width: auto;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
}

	#header {
		margin: 0;
		padding: 0;
		height: 86px;
		overflow: hidden;
	}
	
		/* Interim text logo: the logo GIFs have a dark background baked in, so they are
		   moved off-screen (alt text kept) until the new logo artwork is supplied. */
		#logo img, #logo_right img {
			position: absolute;
			left: -9999px;
		}

		#logo {
			float: left;
			padding: 21px 0 0 12px;
		}

		#logo a {
			display: block;
			color: #002750;
			text-decoration: none;
		}

		#logo a:before {
			content: "Mr Greg Wynn";
			display: block;
			font-size: 28px;
			line-height: 1;
			letter-spacing: -0.3px;
			font-weight: 700;
		}

		#logo a:after {
			content: "BSc MD FRCS";
			display: block;
			margin-top: 5px;
			font-size: 11px;
			line-height: 1;
			letter-spacing: 3px;
			font-weight: 500;
		}

		#logo_right {
			float: right;
			padding-right: 12px;
			font-size: 15px;
			line-height: 86px;
			letter-spacing: 1.4px;
			font-weight: 500;
			text-transform: uppercase;
			color: #5a6470;
		}

		#logo_right:before {
			content: "Consultant Surgeon";
		}


	#main {
		clear: both; /* must sit below the floated feature card (it is a BFC because of overflow:hidden) */
		overflow: hidden;
		padding-bottom: 100px;
	}
	
		
	#left, #middle, #content, #right {
		float: left;
	}
	
	#side_wrap {
		float: left;
		width: 340px;
	}
	#side_top {
		width: 315px;
		height: 15px;
		margin-top: 10px;
		background: url('https://www.wynnsurgery.co.uk/uploads/images/news-feed-box-top.png') center top repeat-y;
		padding: 35px 0 0 25px;
		float: left;
	}

	#side {
		width:265px;
		height: auto;
		background: url('https://www.wynnsurgery.co.uk/uploads/images/news-feed-box-middle.png') center top repeat-y;
		padding: 10px 40px 20px 35px;
		float: left;
	}

	#side_bottom {
		background: url('https://www.wynnsurgery.co.uk/uploads/images/news-feed-box-bottom.png') no-repeat;
		width: 320px;
		height: 105px;
		margin-bottom: 10px;
		padding-left: 25px;
		float: left;
	}

	/* Feature card (Sketch): 1360px wide white card, 25px padding, photo then navy strapline bar underneath.
	   Wider than the 960px container, so it is centred on the viewport. */
	#feature {
		float: left;
		clear: both;
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		box-sizing: border-box;
		width: calc(100vw - 80px);
		max-width: 1360px;
		margin: 26px 0 26px 0;
		padding: 25px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
	}

	#feature img {
		display: block;
		width: 100%;
		height: 500px;
		margin: 0;
		padding: 0;
		border: 0;
		object-fit: cover;
		object-position: center;
	}

	/* the default photo is positioned to match the designer's framing (fitted against the design pixels) */
	#feature img.hero-default {
		object-position: 50% 40.5%;
	}

				#strapline_wrap {
				position: absolute;
				left: 25px;
				right: 25px;
				bottom: 25px;
				height: 61px;
				background: #002750;
				line-height: 61px;
				padding-left: 20px;
				font-size: 19px;
				font-weight: 500;
				color: #fff;
				}
			
	

	#content {
		width:557px;
		float: right;
		margin: 66px 12px 0 0;
		/* beats the inline margin-top on the home template */
		margin-top: 66px !important;
	}

	#content.fullwidth {
		float: none;
		width: auto;
		margin: 66px 12px 0;
	}

	#content p {
		margin:0 0 24px 0;
		color:#212b32;
		font-size:15px;
		line-height:26px;
	}

	
		#content ol {
			margin: 0;	
			padding: 20px 0;	
		}
	
		#content ul {
			list-style: square inside url("images/bullet.png");
			margin: 0;	
			padding: 0 0;	
		}
	
		#content li, #sidebar li {
			color: #212b32;
			margin: 0;
			padding: 0;
			font-size: 15px;
			line-height: 26px;
		}

		#content li ul, #sidebar li ul {
			margin-left: 1em;
		}

	/* Sidebar card (Sketch): same treatment as the feature card - white, 25px padding, soft shadow.
	   The template only outputs it when the page has sidebar content. */
	#sidebar_wrap {
		float: left;
		box-sizing: border-box;
		width: 318px;
		margin: 66px 0 0 12px;
		padding: 22px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
	}

		#sidebar {
			width: auto;
			margin: 0;
			padding: 0;
			background: none;
		}

		#sidebar img {
			display: block;
			float: none !important;
			width: 100%;
			height: auto;
			margin: 0;
			padding: 0;
			border: 0;
		}

	/* "Ask for an appointment" card at the bottom of the page content (enabled per page via the
	   show_appointment content block) - same card treatment as the feature and sidebar cards */
	.appointment-box {
		clear: both;
		box-sizing: border-box;
		margin: 34px 0 0;
		padding: 30px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
	}

		.appointment-box h2 {
			margin: 0 0 18px;
		}

		/* wrapper lets site-responsive.js scale the fixed-size TopDoctors iframe down to fit narrow boxes */
		.appointment-widget {
			overflow: hidden;
		}

		.appointment-box iframe {
			display: block;
			border: 0;
		}
	#footer_wrap {
		background: #7f93ab;
		border-top: 5px solid #002750;
		clear: both;
	}

	#footer {
		width: auto;
		max-width: 935px;
		margin: 0 auto;
		padding: 32px 0 120px;
		color:#fff;
		height: auto;
		overflow: hidden;
	}

	.footer_left:first-child {
		width: 318px;
	}

	.footer_left {
		float: left;
		margin: 0 60px 0 0;
		font-size: 19px;
		line-height: 28px;
		font-weight: 500;
		color: #fff;
	}

		#footer a {
			color: #fff;
			font-weight: inherit;
		}

		#footer p {
			color: #fff;
			font-size: 15px;
			line-height: 24px;
			font-weight: 700;
			margin: 8px 0 0;
		}

		#footer p a {
			font-size: inherit;
			color: #fff;
			text-decoration: none;
		}

		#footer a:hover {
			text-decoration: underline;
		}
	
		#copyright {
			font-size:14px;
			color:#707070;
			float: left;
		}
		
		#wdl a{
			font-size:14px;
			color:#707070;
			float: right;
		}
		
/*###################################################*/
/*####################  NAV  ########################*/
/*###################################################*/
#nav, #nav ul {
	margin: 0;
	padding: 0;
}

/* Spacing between items is now li padding (15px each side + 4px span padding = the old 38px gap) so
   the hover background can fill the whole 51px bar height without moving the text. */
#nav {
	float: left;
	margin-left: -4px;
}

	#nav ul {
		list-style-type: none;
	}

		#nav li {
			line-height: 51px;
			margin: 0;
			padding: 0 13px;
			position: relative;
		}
	
		#nav li, #nav a {
			float: left;
		}

			#nav a {
				font-size: 15px;
				font-weight: 500;
				color: #fff;
				text-decoration: none;
				height: auto;
			}

			#nav a span {
				padding: 6px 4px;
			}

			/* caret on items that have a dropdown (as in the design) */
			#nav a.parent span:after {
				content: "";
				display: inline-block;
				margin-left: 6px;
				vertical-align: middle;
				border: 4px solid transparent;
				border-top: 5px solid #fff;
				border-bottom-width: 0;
			}

			/* hover / keyboard focus: darker band the full height of the nav bar */
			#nav li:hover, #nav li:focus-within {
				background: #6d8299;
			}

			/* current page: white underline */
			#nav li.menuactive, #nav li.menuactive:hover {
				box-shadow: inset 0 -3px 0 #fff;
			}

				/* dropdown: full-width bar in the same colour as the hovered item, so they read as one piece */
				#nav li ul {
					position: absolute;
					display: none;
					z-index: 3;
					height: 51px;
					top: 51px;
					width: 2000px;
					left: -100%;
				}

				#nav li ul:before {
					content: "";
					position: absolute;
					z-index: -1;
					top: 0;
					bottom: 0;
					left: -3000px;
					right: -3000px;
					background: #6d8299;
				}
				
				#nav li li {
					float: left;
					padding: 0 15px;
					margin: 0;
					display: inline;
				}

				#nav li li, #nav li li:hover, #nav li li:focus-within {
					background: none;
					box-shadow: none;
				}

				#nav li li a {
					color: #fff;
				}

				#nav li li:hover, #nav li li:focus-within {
					background: #002750;
				}
				
					#nav li:hover ul, #nav li:focus-within ul {
						display: block;
					}

	#nav-box{
		clear: both;
		height: 50px;
		padding-top: 3px;
		float: left;
		display:block;
		width: 100%;
		position: relative;
		z-index: 2;
	}

	#subnav {
		width: 100%;
		height: 51px;
		position: absolute;
		top: 139px;
		background: #6d8299;
		left: 0;
		z-index: 1;
		display:none;
	}

/*###################################################*/
/*###############  OTHER STYLES  ####################*/
/*###################################################*/
#header-contact {
	float: right;
	font-size: 15px;
	color: #fff;
	line-height: 51px;
	margin-right: 11px;
}

.button {
	background: #002750;
	border-radius:4px;
	-moz-border-radius: 4px;
	width: 100px;
	height: 38px;
	line-height: 38px;
	font-weight: 700;
	color: #fff;
	display: block;
	text-align: center;
}

.button:hover {
	text-decoration: none;
	background: #14314f;
	color: #fff;
}

/*###############  CONTACT FORM  ####################*/

.contact-form {
	margin: 0;
	padding: 0;
	float: left;
}
			
	.contact-form  input[type="text"] {
		margin: 12px 0;
		padding: 0; 
	}
	
	.contact-form label {
		margin: 0;
		padding: 0;
	}
	
	.required {
		margin: 0;
		padding: 0;
	}		
	
	.contact-form textarea {
		margin: 0;
		padding: 0;
	}
	
	.submit {
		margin: 0;
		padding: 0;
	}
			
/*###############  NEWS  ####################*/		
	
#news {
	margin: 0 0 0 0;
	padding: 0;
	float: left;
}

	#news .NewsSummaryLink {
		margin: 0;
		padding: 0;
	}
				
	#news .NewsSummaryMorelink {
		margin: 0;
		padding: 0;	
	}

	.NewsSummaryPostdate {
		margin: 0;
		padding: 0;
	}
	
	.NewsSummaryLink {
		margin: 0;
		padding: 0;
	}
	
	.NewsSummaryCategory {
		margin: 0;
		padding: 0;
	}
	
	.NewsSummaryAuthor {
		margin: 0;
		padding: 0;
	}
	
	.NewsSummaryContent {
		margin: 0;
		padding: 0;
	}

	.NewsTitle {
		font-weight: 700;
		line-height: 26px;
		color: #002750;
	}

	.NewsSummarySummary {
		color: #212b32;
		line-height: 26px;
	}
		

/*###############  CONTACT FORM ####################*/		
.contactform label {
	color: #212b32;
}

.contactform input {
	margin-top: 5px;
	font-family: inherit;
	font-size: 15px;
}

.contactform textarea {
	resize: none;
	font-family: inherit;
	font-size: 15px;
}

.contactform div {
	margin-top: 15px;
}

/*###############  HOME TESTIMONIAL  ####################*/
.home-testimonial {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	max-width: 946px;
	height: 84px;
	/* cancels the 15px spacer <p> in the template plus its 24px paragraph margin */
	margin: -39px auto 0;
	padding: 12px 12px 16px;
	box-sizing: border-box;
}

.home-testimonial p {
	margin: 0 16px;
	-webkit-flex: 0 1 762px;
	flex: 0 1 762px;
	font-size: 16.5px;
	line-height: 1.35;
	font-weight: 700;
	color: #002750;
}

.home-testimonial-quote-up,
.home-testimonial-quote-down {
	width: auto;
	height: auto;
	background: none;
	-webkit-align-self: flex-start;
	align-self: flex-start;
	padding-top: 30px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 62px;
	line-height: 0.4;
	color: #d5d5d5;
}

.home-testimonial-quote-up:before { content: "\201C"; }
.home-testimonial-quote-down:before { content: "\201D"; }

/*###############  RESPONSIVE: shared  ####################*/
/* Mobile-menu pieces are hidden until the mobile block below turns them on */
#nav-toggle { display: none; }
#nav .nav-back, #nav .nav-heading { display: none; }

/*###############  RESPONSIVE: tablet / small desktop (768px - 959px)  ####################*/
@media (max-width: 959px) {
	#content { width: calc(100% - 354px); }
	#footer { padding-left: 12px; padding-right: 12px; }

	/* 7 menu items no longer fit at 15px / 15px padding, so tighten them */
	#nav { margin-left: 4px; }
	#nav li { padding: 0 6px; }
	#nav li li { padding: 0 6px; }
	#nav a { font-size: 14px; }
	#nav a span { padding: 6px 3px; }
}

/*###############  RESPONSIVE: mobile (below 768px)  ####################*/
@media (max-width: 767px) {
	/* ---- type (Sketch "Type Styles", mobile column) ---- */
	body { font-size: 15px; line-height: 26px; }
	h1 { margin-bottom: 16px; font-size: 27px; line-height: 34px; letter-spacing: -0.6px; }
	h2 { font-size: 22px; line-height: 29px; letter-spacing: -0.4px; }
	h3 { font-size: 19px; line-height: 26px; letter-spacing: -0.2px; }
	h4 { font-size: 17px; line-height: 24px; }
	h5 { font-size: 15px; line-height: 23px; }
	h6 { font-size: 11px; line-height: 17px; letter-spacing: 2px; }

	/* ---- page: on mobile the colour bands come from the elements themselves (their heights vary),
	        not from the fixed-pixel body gradient used on desktop ---- */
	body, body:not(.home) { background-image: none; background-color: #f3f3f3; }
	#container { width: auto; max-width: none; }
	#subnav { display: none !important; }

	/* ---- header: logo + hamburger, then the "Consultant Surgeon" band ---- */
	#header { position: relative; height: auto; overflow: visible; background: #fff; }
	#logo { float: none; display: block; box-sizing: border-box; height: 75px; padding: 19px 70px 0 20px; background: #fff; border-bottom: 3px solid #002750; }
	#logo a:before { font-size: 22px; line-height: 1; letter-spacing: -0.2px; }
	#logo a:after { margin-top: 3px; font-size: 9.5px; line-height: 1; letter-spacing: 2.4px; }
	#logo_right { float: none; display: block; padding: 0 20px; background: #7f93ab; font-size: 12px; line-height: 42px; height: 44px; letter-spacing: 1.6px; font-weight: 700; color: #fff; }

	#nav-toggle { display: block; position: absolute; top: 14px; right: 9px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.nav-toggle-icon, .nav-toggle-icon:before, .nav-toggle-icon:after { position: absolute; left: 11px; width: 22px; height: 2px; background: #16314f; -webkit-transition: -webkit-transform .2s, background .2s; transition: transform .2s, background .2s; }
	.nav-toggle-icon { top: 21px; }
	.nav-toggle-icon:before, .nav-toggle-icon:after { content: ""; left: 0; }
	.nav-toggle-icon:before { top: -7px; }
	.nav-toggle-icon:after { top: 7px; }
	html.nav-open .nav-toggle-icon { background: transparent; }
	/* open: a 20x20 cross with 2px round-capped strokes */
	html.nav-open .nav-toggle-icon:before, html.nav-open .nav-toggle-icon:after { top: 0; left: -3px; width: 28px; border-radius: 1px; }
	html.nav-open .nav-toggle-icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	html.nav-open .nav-toggle-icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	/* ---- menu: full-screen panel under the header ---- */
	#nav-box { display: none; float: none; width: auto; height: auto; padding: 0; }
	html.nav-open, html.nav-open body { overflow: hidden; }
	html.nav-open #nav-box { display: block; position: fixed; top: 75px; left: 0; right: 0; bottom: 0; z-index: 1000; background: #6d8299; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	#nav { float: none; margin: 0; }
	#nav > ul { padding-top: 8px; }

	#nav li { float: none; margin: 0; padding: 0; line-height: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
	#nav > ul > li:last-child { border-bottom: 0; }
	#nav li, #nav li:hover, #nav li:focus-within, #nav li.menuactive, #nav li.menuactive:hover { background: none; box-shadow: none; }
	#nav a { display: block; float: none; position: relative; padding: 0 20px; font-size: 15px; font-weight: 500; line-height: 48px; color: #fff; }
	#nav a span { padding: 0; }
	#nav a:active { background: rgba(0, 0, 0, 0.12); }
	/* chevron on parent rows (replaces the desktop caret) */
	#nav a.parent span:after { content: ""; position: absolute; top: 20px; right: 23px; width: 7px; height: 7px; margin: 0; border: 0; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

	/* sub-pages: a panel that slides in over the menu */
	#nav li ul { position: fixed; display: block; top: 75px; left: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 1001; padding-top: 8px; background: #6d8299; overflow-y: auto; visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .25s ease, visibility 0s linear .25s; transition: transform .25s ease, visibility 0s linear .25s; }
	#nav li ul:before { display: none; }
	#nav li.sub-open > ul { visibility: visible; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease; }
	#nav li li { float: none; display: block; padding: 0; }
	#nav li li:hover, #nav li li:focus-within { background: none; }
	#nav li li.nav-back, #nav li li.nav-heading { display: block; }
	#nav .nav-back a { padding-left: 44px; }
	#nav .nav-back a:before { content: ""; position: absolute; top: 20px; left: 26px; width: 7px; height: 7px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	#nav .nav-heading span { display: block; padding: 0 20px; font-size: 11px; font-weight: 700; line-height: 40px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }

	/* ---- feature card: 12px margins, 10px padding, image 3:2, blue band runs 14px above / 18px below ---- */
	#feature { float: none; left: auto; -webkit-transform: none; transform: none; width: auto; max-width: none; margin: 14px 12px 18px; padding: 10px; }
	#feature:before { content: ""; position: absolute; z-index: -1; top: -14px; bottom: -18px; left: 50%; width: 100vw; margin-left: -50vw; background: #e2edf7; }
	#feature img { height: calc((100vw - 44px) * 0.6677); }
	#strapline_wrap { position: static; height: auto; padding: 12px 14px; font-size: 14px; line-height: 20px; }

	/* ---- testimonial: full-width band, opening quote mark only ---- */
	#container > p[style] { display: none; }
	.home-testimonial { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; max-width: none; height: auto; margin: 0 !important; padding: 18px 24px 22px; background: -webkit-linear-gradient(top, #fff, #f3f3f3); background: linear-gradient(to bottom, #fff, #f3f3f3); border-top: 1px solid #cecece; border-bottom: 1px solid #d1cfd0; }
	.home-testimonial p { -webkit-flex: 1; flex: 1; font-size: 15px; line-height: 1.4; }
	.home-testimonial-quote-up { margin-right: 8px; padding-top: 0; font-size: 44px; line-height: 0.75; }
	.home-testimonial-quote-down { display: none; }

	/* ---- content: single column, sidebar card first ---- */
	#main { padding-bottom: 0; }
	#sidebar_wrap { float: none; width: auto; margin: 28px 20px 28px; padding: 16px; }
	#content, #content.fullwidth { float: none; width: auto; margin: 28px 20px 40px !important; }
	#sidebar_wrap + #content { margin-top: 0 !important; }
	#content p { margin-bottom: 20px; }
	#content .left, #content .right { float: none; }
	/* Images in page content: centred on their own line with the text starting below. float is !important
	   because some images are floated by an inline style set in the page editor. */
	#content img, #content img[style*="float: left"] { float: none !important; display: block; max-width: 100%; height: auto; margin: 0 auto 20px; padding: 0; }
	#content table { max-width: 100%; }
	.appointment-box { margin-top: 28px; padding: 20px; }
	.appointment-box h2 { margin-bottom: 16px; }

	/* ---- footer: Contact first, then Terms/Privacy and the credit ---- */
	#footer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: auto; max-width: none; height: auto; overflow: visible; padding: 23px 20px 38px; }
	.footer_left, .footer_left:first-child { float: none; width: auto; margin: 0 0 21px; font-size: 17px; line-height: 26px; }
	#footer p { margin-top: 4px; }
	.footer_left:first-child { margin-bottom: 0; }
	.footer_left:last-child { -webkit-order: -1; order: -1; }
	.footer_left:last-child p a { display: block; }
	.footer-sep { display: none; }
	#footer .footer_left:first-child p { font-size: 14px; line-height: 22px; }
}

/*###############  RESPONSIVE: small phones (below 480px)  ####################*/
/* The TopDoctors widget needs ~400px; with no side padding it gets the full box width (80% scale at 360px,
   instead of 70%), and the heading is centred above it. */
@media (max-width: 479px) {
	.appointment-box { padding-left: 0; padding-right: 0; }
	.appointment-box h2 { text-align: center; }
}

@media screen and (max-width: 768px) {
#content p.email-address {margin-bottom: 65px;}
}

@media screen and (min-width: 768px) {
#content p.email-address {margin-bottom: 0px;}
#content p.phone-number {margin-bottom: 65px;}
}