/* No longer needed as hosting fonts locally

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*/

@charset "utf-8";
/* CSS Document */

/* Site Logo */
.site-logo {
	max-width: 270px;
	margin-bottom:10px;
	padding-bottom: 0;
}
@media screen and (max-width: 500px) {
	.site-logo {
	max-width: 250px;
	}
}

/* Shift section containing hero container up 32 px to remove white space where hero becomes full width */
@media screen and (max-width: 1392px) {
	.white2 {
	margin-top: -32px
	}
}
/* Add 4px blu border to top of hero container at 1118px and below as the site header bottom border does not show on home page */
@media screen and (max-width: 1118px) {
	.hero-container {
	border-top: 4px solid #1c6bb1;
	}
}

/* Site Header */
#site-header {
	background: #ffffff; 
	padding-top: 12px;
}
/* Add blue bottom border and extra padding to site header when main nav disappears */
@media screen and (max-width: 1118px) {
	#site-header {
	padding-bottom:12px;
	border-bottom: 4px solid #1c6bb1;
	}
}
/* Telephone number in header  */
#h-telephone {
    font-size: clamp(1.2rem, 1.1127rem + 0.4364vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 0;
	line-height: 1.1;
}
#h-telephone,
#h-telephone a {
    color: #333
}
#h-telephone a:hover {
	color: #1C6BB1;
}
/*Header right  alignment etc */
#header-right {
	text-align:right; 
	padding-top: 1em; 
}
/* Quote in header */
#h-quote {
    font-family: 'Nothing You Could Do', cursive;
    font-size: clamp(0.9rem, 0.8418rem + 0.2909vw, 1.1rem);
    color: #666;
    margin-bottom: 0;
	line-height: 1.1
    }
/*Hide header right on small screens */
@media screen and (max-width: 640px) {
	#header-right {
	display: none;
	}
}
/*Add padding to header right content to make room for mobile menyu at 1118px and below */
@media screen and (max-width: 1118px) {
	#header-right {
	padding-right:75px;
	}
}

/*Restrict width of main content area to max of 990px */

.restrict-width {
	width: 100%;
	max-width:990px;
}

/* Make main content images a max width of 100% */
#maincontent img {
	max-width: 100%;
}

/* Blockquote in main content areas on page */

#maincontent blockquote {
    margin: 40px 0 40px 0;
    padding: 25px 1rem 15px 2rem;
    border-left: 3px solid #E5E7F2;
}

/*==== ACCESSIBILITY ====*/

/* Apply focus effect across site for keboard users only - some other more specific css is needed for search box and buttons*/	
  :focus:not(:focus-visible) {
    outline: none; /* no outline for mouse users */
  }
  :focus-visible {
    outline: 3px dotted #F89823; /* outline for keyboard users */
  }

/* Specific rule for text-based links */
a:focus:not(:focus-visible) {
    outline: none; /* no outline for mouse users */
  }
a:focus-visible {
    outline: 3px dotted #F89823; /* outline for keyboard users on text links */
}

/* Maintain focus outline for image links - NOT NECESSARY THIS DESIGN AS OVERRIDEEN BY a:focus
  a:focus-visible img {
    outline: 3px dotted #F89823; 
  } */

/* Button focus styles */
.button:focus:not(:focus-visible) {
    outline: none; /* no outline for mouse users */
  }
.button:focus-visible {
    outline: 3px dotted #F89823; /* outline for keyboard users */
	background: #000; /*change background to black for more obvious keyboard focus */
  }

/* Skip to content link */

.skip-link {
  left: 50%;
  margin-top: 0;
  padding: 10px 8px 10px 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
  }

.skip-link:focus {
  transform: translateY(0%);
   margin-top: 15px;
   background: #fff;
	outline: 3px dotted #F89823; /* outline for keyboard users */
  }

/* prevent cms editable regions from being able to display underlining with classes and pseudo-class*/
.editable [style*="underline"] {
  text-decoration: none !important;
}

u {
  text-decoration: none !important;
}

.editable u {
  text-decoration: none !important;
}

/* indent lists and add bottom margin to lists main content areas of pages */
#maincontent ul {
	margin-left: 3.5rem;
	}
#maincontent ol {
	margin-left: 3.5rem;
	}
#maincontent li {
	margin-bottom: 1rem;
}
	
#maincontent2 ul {
	margin-left: 3.5rem;
	}
#maincontent2 ol {
	margin-left: 3.5rem;
	}
#maincontent2 li {
	margin-bottom: 1rem;
}

/* make sure above list  margin does not target navigation */
.mainNavigation ul {
	margin-left: 0;
}
.mainNavigation  li {
	margin-bottom:0;
}
/* increase margin under h1 headings in main content */
#maincontent h1 {
	margin-bottom:1.5rem;}
	
/* reduce line height of h1 & h2 in main content areas */
#maincontent h1, h2 {
	line-height: 1.1em;
}
#maincontent2 h1, h2 {
	line-height: 1.1em;
}

/* increase text size in buttons in main content areas */
#maincontent .button {
	font-size: 1.25rem;
}
#maincontent2 .button {
	font-size: 1.25rem;
}	

/* increse padding around footer content */
.footer-content {
	padding: 65px 0 30px 0;
}


/* increase padding on intro h1 on home page */
#intro h1 {
	margin-top: 0.8rem;
	}
	
@media screen and (max-width: 1025px) {
	#intro h1 {
	margin-top: 1rem;
	}
}

/* reduce space between content and banners on mobile */
@media screen and (max-width: 1025px) {
.contentWrapper {
    padding: 0rem 0 .9rem
	}
}
/* hide strapline quote on mobiles */
@media screen and (max-width: 640px) {
	#quote {
		display: none;
	}
}

/* extra padding between thumb and headline home page under 1000px */
@media screen and (max-width: 1030px) {
	.thumb {
		margin-bottom: 15px;
	}
}

/* Underline links (not buttons) */
.contentWrapper.white a:not(.button) {
    border-bottom: 1px dotted;
}
.contentWrapper.white a:not(.button):hover {
    color: #008945;
}

#iconarea a:not(.img) {
    border-bottom: 1px dotted;
}
#iconarea a:not(.img):hover {
    color: #008945;
}

#iconarea2 a:not(.img) {
    border-bottom: 1px dotted;
}
#iconarea2 a:not(.img):hover {
    color: #008945;
}

/*extra spacing on h2s in main section */
.contentWrapper h2 {
	margin-top: 30px; margin-bottom: 18px;}

/* bottom margin above footer increase */
.btmpadding {padding-bottom: 3em;}

/* CLINIC TABLE ------------------------------------------------------------*/

.clinictable {
	background-color: #dedede;
	border-spacing: 1px;
	-khtml-border-radius: 0px;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	border-radius: 0px;
	font-family: 'Barlow', sans-serif;
	margin-bottom:40px;

}
.clinictable th {padding: 16px; text-align: left; font-weight:600; font-size: 1.25rem; 	line-height: 1.7rem;}
.clinictable td {padding: 16px; text-align: left; font-size: 1.25rem; line-height: 1.7rem;}
.clinictable tr:nth-child(even) {background-color: #ffffff}	
.clinictable tr:nth-child(odd) {background-color: #f7f7f7}
.clinictable p {margin-bottom:1rem; padding-bottom:0;}

/* BIO SECTION */

.bio {
background-image: url(images/bio-bg.jpg);
background-repeat:repeat-y;
background-position: top right;
border: 5px solid #FFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 2.5em 1.75em 2.5em 1.75em;
background-color: #Fafafa;
margin-bottom: 2.2em;
}

/* bio photos */
.biophotos{
	border-radius: 49%;
	-webkit-border-radius: 49%;
	-moz-border-radius: 49%;
	-o-border-radius: 49%;
	margin-left: 15px;
	margin-bottom: 20px;
	float: right;
	border: 2px solid #cccccc;
	max-width: 275px;
	height: auto;
}
/* Move bio photo to left and add right margin to force text onto new line on smaller screens */
@media screen and (max-width: 585px) {
	.biophotos {
		float: left;
		margin-left:0;
		margin-right: 7em;
		width: 280px;
	}
}

/* SIDEBAR */

.sidebar p {font-family: 'Barlow', sans-serif;}
.sidebar h3 {font-family: 'Roboto Condensed', sans-serif; font-size: 1.5rem;}

.sidebar{
	font-size: 1em;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-top: 10px;
	background-color: #EAE9EC;
	background-image: url(images/sidebarbg.jpg);
	background-repeat: repeat-y;
	background-position: right top;
	border: 5px solid #FFF;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 18px;
}

.sidebar a:link {
	font-size: 20px;
}
	.sidebar a:visited {
	font-size: 20px;
}
.sidebar a:hover {
	font-size: 20px;
}
.sidebar a:active {
	font-size: 20px;
}


.button.side {
   	padding: 20px 20px;
	color: #2DBEEA;
	background: transparent;
    border: 1px solid #2DBEEA; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
	font-size: 15px;
	font-variant: none;
}

button.side:focus,
button.side:hover {
    line-height: 60px;
	padding: 15px; 
	color: #fff;
	background: #2DBEEA;
    border: 1px solid #2DBEEA; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}


.sidebarlogo {
	margin-right: 15px;
	margin-top: 15px;
}
.sidebarlogo2 {
	margin-right: 15px;
	margin-top: 15px;
}

/* END SIDEBAR */



@media screen and (max-width: 767px) {
	#right-sidebar, #steth { display:none; }
}

.responsiveimg {
	max-width: 100%;
}
.responsiveimg  img {
	max-width: 100%;
}

b, strong {font-family: 'Barlow', sans-serif;}

#maincontent p {font-size: 1.25rem; font-family: 'Barlow', sans-serif;}
#maincontent2 p {font-size: 1.25rem; font-family: 'Barlow', sans-serif;}
#maincontent ul, ol, li {font-size: 1.25rem; font-family: 'Barlow', sans-serif;}
#maincontent2 ul, ol, li {font-size: 1.25rem; font-family: 'Barlow', sans-serif;}
#welcome p {font-size: 1.25rem; font-family: 'Barlow', sans-serif;}
#news p {font-size: 1.25rem; font-family: 'Barlow', sans-serif;}
#news h2 {font-size: 1.8rem; margin-bottom: 10px; margin-top: 35px;}
#news h3 {font-size: 1.8rem; margin-bottom: 10px; margin-top: 35px;}
#news h4 {font-size: 1.8rem; margin-bottom: 10px; margin-top: 35px;}
#iconarea, #iconarea2 {font-size: 1.2rem; font-family: 'Barlow', sans-serif;}
#iconarea p {color: #333;}
#iconarea2 p {color: #333;}
#footerpad {margin-bottom: 30px; font-family: 'Barlow', sans-serif;}
.bio h2, h3, h4 {font-size: 1.6rem; margin-bottom: 10px; margin-top: 0;}


.pagebanner {
	width: 990px;
	max-width: 100%;
	margin-top: 19px;
	margin-bottom: 25px;
}

/*ensure that any p tags applied to page banner area have zero margin & padding added by CMS */
.pagebanner p {
	margin:0;
	padding:0;
}

.sideimage{
	float: right;
	max-width: 100%;
	margin-top: 15px;
	padding-left: 15px;

}
.sideimage2{
	float: right;
	max-width: 100%;
	margin-top: 15px;
	padding-left: 30px;
	margin-right: 15px;
}

A.button {
	FONT-WEIGHT: 400;
	font-family: 'Roboto Condensed', sans-serif;
	FONT-SIZE: 15px;
	COLOR: #ffffff;
	TEXT-DECORATION: none;
	background-color: #1c6bb1;
	padding-left: 38px;
	padding-right: 38px;
	padding-top: 16px;
	padding-bottom: 16px;
	text-transform: uppercase;	
    margin-right: 18px;
}
A.button:hover {
	COLOR: #ffffff;
	background-color: #0086B4;
	text-decoration: none;
	
}
.bannerpic {
	border-bottom-color: #FFF;
	margin-top: 25px;
}

/* Remove white space above home banner when screen resizes to laptop dimensions */
@media screen and (max-width: 1410px) {
    .bannerpic {
        margin-top: 0px;
    }
}

.white2 {
	background:#FFF;
	padding-top: 0.5rem; 
	}
	
@media screen and (max-width: 1410px) {
    .white2 {
        padding-top: 0rem; 
	}
    }
}

.fapad {
	padding-bottom: 20px; padding-top: 20px;
}
.greypad {padding-bottom: 40px; padding-top: 60px;}
.greypad p {margin-top: 10px; font-size: 0.9em;}
#intro {padding-bottom:30px;}


/* STANDARD ALERT DIV - APPLY THIS STYLE PLUS COLOUR REQUIRED STYLE FROM BELOW */	
.alertdiv {
	background-color: #f5f6f7;
	padding: 30px 35px 10px 35px;
	margin-bottom: 28px;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

.alertdiv h2 {
	margin-top:0;
	font-size: 1.65rem
}

	
/* GREY ALERT DIV */	
.greyalert {
	border: 2px solid #e6e6e6;
}

/* GREEN ALERT DIV */	
.greenalert {
	border: 2px solid #00ad7c;
}

/* AMBER ALERT DIV */	
.amberalert {
	border: 2px solid #FFBF00;
}

/* BLUE ALERT DIV */	
.bluealert {
	border: 2px solid #1C6BB1;
}

/* RED ALERT DIV */	
.redalert {
	border: 2px solid #e21a1a;
}