/* ==========================================================================
   Southgate Dental Care - main stylesheet
   Combined from default.css + nav.css + style.css (load order preserved).

   1. Reset & base
   2. Layout        - #main_DIV, #left_part, #right_part, #content
   3. Components    - social bar, banners, footer, sitemap, feeds
   4. Navigation    - text menu (replaced the nav.jpg sprite)
   5. Responsive    - mobile / tablet / desktop breakpoints
   ========================================================================== */

/* ==========================================================================
   1. Reset & base
   ========================================================================== */

/* Was previously declared only inside three media queries, so screens wider
   than 1199px never received it and computed widths differed by viewport. */
*,
::after,
::before {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Layout & base elements (was default.css)
   ========================================================================== */

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

div {
	position: relative;
}
h1{
	color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 28px;
    margin: 0;	
}
h1 a{
	color: #fff;
	text-decoration:none;
}
h1 a:hover{
	color:#FFF;
	text-decoration:underline;
}

h2 {
	font-family:Arial, Helvetica, sans-serif;
	color:#f62b03;
	text-decoration: none;
	font-size: 18px;
}

h3 {
	font-family:Arial, Helvetica, sans-serif;
	color:#365BA3;
	text-decoration: none;
	font-size: 16px;
	margin: 0px;
	padding-top: 15px;
	padding-left: 20px;
}


h4 {
	font-family:Arial, Helvetica, sans-serif;
	color:#0090A5;
	text-decoration: none;
	font-size: 16px;
	margin: 0px;
	padding-top: 15px;
	padding-bottom:10px;
	
}
h5 {
    font-weight:normal;
	font-size: 14px;
	margin: 0px;
	padding:0px;
	
}

#main_bg {
	background-image: url(../img/practice_bg.jpg);
	background-repeat: no-repeat;
	background-position: left 250px;
}

#main_DIV {
	width: 900px;
	padding: 0px;
	margin:auto;
}
#top_part {
	width: auto;
	padding: 16px 0px;
	justify-items: right;
}
.phn-number {
	font-size: 18px;
	font-weight: 600;
	align-items: center;
	margin-bottom: 8px;
}
.phn-number a {
	color: #0090a5;
}
.phn-number i {
	color: #0090a5;
	position: relative;
	top: 2px;
}
#top_part ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}
#top_part li {
	list-style: none;
}

/* Social icons are Boxicons glyphs now - the social-icon.png sprite is gone,
   so they take colour on hover and stay sharp at any zoom. */
#top_part .social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #0090a5;
	color: #ffffff;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Each button carries its own brand colour. Values are the official brand
   hexes; the darker :hover shades are the same colours stepped down.
   Twitter uses the X logo on X's black; the link still points at the
   twitter.com account, which redirects to x.com. */
#top_part .social-link--facebook  { background: #1877f2; }
#top_part .social-link--twitter   { background: #000000; }
#top_part .social-link--pinterest { background: #e60023; }
#top_part .social-link--youtube   { background: #ff0000; }

#top_part .social-link--facebook:hover,
#top_part .social-link--facebook:focus  { background: #0f5ec2; }
#top_part .social-link--twitter:hover,
#top_part .social-link--twitter:focus   { background: #000000; }
#top_part .social-link--pinterest:hover,
#top_part .social-link--pinterest:focus { background: #b3001b; }
#top_part .social-link--youtube:hover,
#top_part .social-link--youtube:focus   { background: #cc0000; }

#top_part .social-link:hover,
#top_part .social-link:focus {
	color: #ffffff;
	transform: translateY(-1px);
}

#top_part .phn-number .bx {
	vertical-align: middle;
}

/* Visually hidden but readable by screen readers. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#top_part a:link, #top_part a:active, #top_part a:visited{
	text-decoration:none;
}
#left_part {
	overflow:hidden;
	float: left;
	width: 363px;
	background: url(../img/logo_big.jpg) no-repeat 0 260px;
	min-height:563px;
	margin: 30px 0 0 0;
	padding: 0px;
}
#rightside_part {
	overflow:hidden;
	float: right;
	width: 537px;
	margin: 0px;
	padding: 0px;
}
#right_part {
	overflow:hidden;
	float: right;
	width: 537px;
	margin: 0px;
	padding: 0px;
}
#main_navigation {
	margin-top:20px;
}
#address {
	/*height:50px;*/
	width:auto;
	margin: 0;
	overflow:hidden;
	color:#7c7e81;
	font-family:'PT Sans', Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:15px;
}
#address span{
	color:#0090a5;
	font-size:20px !important;
	font-family:'PT Sans', Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:0px;
}
#spofferbut {
	height:84px;
	width: auto;
	margin: 0;
	overflow:hidden;
}

#copyright  {
    overflow: hidden;
    float: left;
        font-size: 11px;
    color: #999999;
    font-weight: normal;
    text-decoration: none;
    margin-top: 30px;
    width: 100%;
}
#copyright  a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999999;
	font-weight:normal;
	text-decoration:underline;
}
#copyright  a:hover{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666666;
	font-weight:normal;
	text-decoration:none;
}

#copyright  h2{
	overflow:hidden;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999999;
	font-weight: normal;
	text-decoration:none;
	margin:0px;
	padding:0px;
}

#copyright-left{
	overflow:hidden;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999999;
	font-weight: normal;
	text-decoration:none;
	line-height: 1.4;
}
#copyright-right {
    overflow: hidden;
    float: right;
    text-align: right;
        font-size: 11px;
    color: #999999;
    font-weight: normal;
    text-decoration: none;
	line-height: 1.4;
}
#content {
	width: 497px;
	margin-top:20px;
	min-height:400px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;

}
#content li{
	padding-bottom:20px;
	text-align:justify;
}
#footer_img {
	clear: both;
	height: 80px;
	width: 100%;
	background-color: #e6f4f6;
	border-radius: 30px 30px 0 0;
	background-repeat: no-repeat;
}
.footer-bg {
    width: 100%;
    background-color: #e6f4f6;
    border-radius: 30px 30px 0 0;
    background-repeat: no-repeat;
    padding: 20px;
    font-size: 12px;
}
.footer-bg p {
        margin-bottom: 10px;
    padding-bottom: 0;
    line-height: 16px;
    color: #333;
}
.footer-bg p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
#page_subnav {
	overflow: hidden;
	width: 537px;
	clear: both;
}

p{
	padding:0 0 20px 0;
	margin:0;
}

/* ==========================================================================
   3. Page banners
   ========================================================================== */

/* All 12 page banners share one rule; only the image differs. */
#banner_chooseus,
#banner_team,
#banner_tour,
#banner_treatments,
#banner_smile,
#banner_npatients,
#banner_say,
#banner_ref,
#banner_fees,
#banner_appoint,
#banner_findus,
#banner_email {
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
	height: 148px;
	margin: 8px 0;
	border-radius: 10px;
}

#banner_chooseus { background-image: url(../img/banner_chooseus.jpg); }
#banner_team { background-image: url(../img/banner_team.jpg); }
#banner_tour { background-image: url(../img/banner_tour.jpg); }
#banner_treatments { background-image: url(../img/banner_treatment.jpg); }
#banner_smile { background-image: url(../img/banner_smile.jpg); }
#banner_npatients { background-image: url(../img/banner_newpatients.jpg); }
#banner_say { background-image: url(../img/banner_say.jpg); }
#banner_ref { background-image: url(../img/banner_ref.jpg); }
#banner_fees { background-image: url(../img/banner_fees.jpg); }
#banner_appoint { background-image: url(../img/banner_appointment.jpg); }
#banner_findus { background-image: url(../img/banner_findus.jpg); }
#banner_email { background-image: url(../img/banner_email.jpg); }

.banner-span {
	position: absolute;
	bottom: 12px;
	left: 16px;
}

/* ==========================================================================
   4. Navigation (was nav.css) - text based, no sprite
   ========================================================================== */

ul#nav {
	min-height: 338px;
	width: 100%;
	margin: 0;
	padding: 0 90px 0 116px;
}

#nav li {
	/* Was display:inline + float:left to stack the fixed-size sprite rows.
	   Plain list items stack the same way and let each row grow with its text. */
	display: block;
	float: none;
	list-style: none;
	outline: none;
}

#nav li a {
	display: block;
	outline: none;
}

/* Text menu.
   Replaces the old nav.jpg sprite: the labels are now real text, so they
   scale, reflow, respond to zoom and browser font settings, and can be
   translated or restyled without editing an image. Colours below are
   sampled from the original sprite so the menu looks unchanged.

   #2d9eac teal   - link / hover text
   #5d5b5c grey   - resting text
   #1d9caf teal   - active pill background (hover state in the old sprite)
   #cbe6ed cyan   - right end of the row gradient */
#nav li[id] {
	width: 190px;
	padding: 2px 0px;
	border-bottom: 1px solid #b5dde5;
	justify-items: right;
}

/* The <a> carries the row: full width, so the whole strip is clickable and
   the active pill spans the row rather than hugging the text. */
#nav li[id] a {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: fit-content;
	min-height: 26px;
	padding: 5px 24px 5px 12px;
	background: transparent;
	color: #5d5b5c;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	text-align: right;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* The ✦ marker that sat at the right of every sprite row. */
#nav li[id] a::after {
	content: "\2726";
	position: absolute;
	top: 50%;
	right: 6px;
	margin-top: -8px;
	color: #8b8b8b;
	font-size: 12px;
	line-height: 16px;
}

#nav li[id] a:hover,
#nav li[id] a:focus {
	color: #2d9eac;
}

#nav li[id] a:hover::after,
#nav li[id] a:focus::after {
	color: #2d9eac;
}

/* Current section: dark pill when resting, teal pill on hover - matching the
   "Smile Gallery" treatment in the original sprite. Styling the <a> (not the
   inner span) is what makes the pill fill the row on every page. */
#nav li[id].active > a {
	background: #5d5d5d;
	border-radius: 8px;
	border-bottom-color: transparent;
	color: #ffffff;
}

#nav li[id].active > a::after {
	color: #ffffff;
}

#nav li[id].active > a:hover,
#nav li[id].active > a:focus {
	background: #1d9caf;
	color: #ffffff;
}

#nav li[id].active > a:hover::after,
#nav li[id].active > a:focus::after {
	color: #ffffff;
}

#nav li#referrals a {
	border-bottom: 0;
}

/* Full-width stacked menu on small screens. #main_navigation keeps a fixed
   190px width and a 98px left margin for the desktop sidebar, so those have
   to be released here too or the list overflows the viewport. */
@media (max-width: 991px) {
	#main_navigation {
		min-height: 0;
		width: 100%;
		margin-left: 0;
	}

	ul#nav,
	#nav li[id],
	#nav li[id] a {
		width: 100%;
		min-height: 0;
	}

	ul#nav {
		min-height: 0;
	}

	#nav li[id] a {
		padding: 10px 32px 10px 14px;
		font-size: 14px;
	}
}

/* ==========================================================================
   5. Components & responsive (was style.css)
   ========================================================================== */

.red_dot {
        font-size: 13px;
    font-weight: normal;
    color: #0090a5 !important;
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
    text-align: left;
}

.top-strip h1 {
    font-size: 12px;
    margin: 0;
		color: #fff;
}


.d-sp{
   
}

.text {
        font-size: 14px;
    line-height: 18px;
    color: #000000;
    text-decoration: none;
    text-align: justify;
}
.marquee-bar {
	background: #92d1da;
	color: #5d5d5d;
	padding: 5px 0;
	font-size: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.text a:link,
.text a:active,
.text a:visited {
    color: #0090a5;
    text-decoration: none;
}

.text a:hover {
    color: #000;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #0090a5;
}
.text p {
    padding: 0 0 10px 0;
    margin: 0;
}

.img a {
    border: none;
}

.img a:hover {
    border: none;
}

.subtitle {
        font-size: 13px;
    font-weight: bold;
    color: #0090a5;
    text-decoration: none;
    text-transform: uppercase;
}

.main_title {
    color: #0090a5;
        font-size: 18px;
    font-weight: normal;
    text-decoration: none;
}

.main_title a:link,
.main_title a:active,
.main_title a:visited {
    color: #0090a5;
        font-size: 18px;
    font-weight: normal;
    text-decoration: none;
    border-bottom: none;
}

.main_title a:hover {
    color: #858585;
        font-size: 18px;
    font-weight: normal;
    text-decoration: none;
}

.sub_title {
    color: #858585;
        font-size: 18px;
    font-weight: normal;
    text-decoration: none;
}

#before_after {
    float: left;
    width: 209px;
}

#float_left {
    float: left;
}

.title {
        font-size: 20px;
    text-decoration: none;
    color: #858585;
}

.page_subnav {
    float: left;
    width: 131px;
        font-size: 11px;
    text-transform: uppercase;
    color: #0090a5;
    text-decoration: none;
    font-weight: bold;
    text-indent: 7px;
    height: 21px;
    line-height: 20px;
    display: block;
    margin-top: 4px;
    margin-right: 3px;
    background-color: #FFFFFF;
}

.page_subnav a:link,
.page_subnav a:active,
.page_subnav a:visited {
    line-height: 20px;
        font-size: 11px;
    text-transform: uppercase;
    color: #0090a5;
    display: block;
    text-decoration: none;
    border: 1px solid #d7d7d7;
    height: 20px;
}

.page_subnav a:hover {
    background-color: #0090a5;
    line-height: 20px;
        font-size: 11px;
    text-transform: uppercase;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    border: #d7d7d7 solid 1px;
}

.page_subnav_select {
    float: left;
    width: 190px;
    margin: 2px;
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
        font-size: 11px;
    text-transform: uppercase;
    color: #1D397C;
    text-decoration: none;
    font-weight: bold;
    text-indent: 7px;
    height: 20px;
    line-height: 20px;
    display: block;
}

.treatment_title_bg {
    background-image: url(../img/title_bg.gif);
    background-repeat: repeat-x;
    height: 48px;
}

.black {
        font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
}

.txt_field {
        font-size: 12px;
    color: #0090a5;
    text-decoration: none;
    border: 1px solid #CCCCCC;
    width: 200px;
}

.txt_dropdown {
        font-size: 12px;
    color: #0090a5;
    text-decoration: none;
    border: 1px solid #CCCCCC;
    width: 120px;
}

.small-size {
    font-size: 10px;
    color: #0090a5;
    text-decoration: none;
}

#end_footer {
    overflow: hidden;
    clear: both;
        font-size: 11px;
    color: #999999;
    font-weight: normal;
    text-decoration: none;
    margin: auto;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
}

#end_footer a {
        font-size: 11px;
    color: #999999;
    font-weight: bold;
    text-decoration: underline;
}

#end_footer a:hover {
        font-size: 11px;
    color: #666666;
    font-weight: bold;
    text-decoration: none;
}

#sitemap {
    height: auto !important;
    margin: 0;
    min-height: 110px;
    padding: 0 0 10px;
    width: 870px;
    border-top: 1px solid #CCCCCC;
}

#sitemap ul#section {
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
}

#sitemap ul#section li {
    display: block;
    float: left;
    font-size: 12px;
    list-style: none outside none;
    padding: 5px 12px 0;
    text-align: left;
    width: 150px;
    border-right: 1px solid #ecf7f8;
}

#sitemap ul#section li a:link,
ul#section li a:active,
ul#section li a:visited {
    color: #666666;
    display: block;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 22px;
    text-decoration: none;
    width: 148px;
}

#sitemap ul#section li a:hover {
    color: #666666;
    text-decoration: underline;
}

#sitemap ul#section li ul {
    margin: 0;
    padding: 0 0 15px 10px;
    float: left;
}

#sitemap ul#section li ul li {
    background: url(../img/bulet.png) no-repeat 0 9px;
    padding-left: 15px;
    border: none !important;
}

#sitemap ul#section li ul li a {
    font-size: 12px !important;
    line-height: 17px !important;
}

.clr {
    clear: both;
}

.facebook-banner {
    margin-top: 20px;
}

.facebook-banner img {
    border: 0;
}

.facebook-banner a:hover {
    color: #000 !important;
    border: 0px;
}

.welcome-bg {
    width: 537px;
    height: 106px;
    background-image: url(../img/welcome-bg.jpg);
    background-repeat: no-repeat;
    background-position: right top;
}

.top-strip {
    background: #0194A8;
    height: 27px;
    }

.top_link {
    line-height: 24px;
    float: right;
    color: #FFF;
}

.top_link a {
    color: #FFF;
    text-decoration: none;
    font-size: 12px;
}

.top_link a:hover {
    color: #333;
    text-decoration: none;
}

.welcomebox {
    width: 880px;
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    padding: 20px 0 10px 0;
    border-top: 1px solid #CCCCCC;
}

.feeder-boxes {
    width: 870px;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0px 0 15px 0;
        display: flex;
    align-content: center;
    justify-content: center;
}

.feeder-boxes img {
    float: right;
    margin-right: 7px;
    padding: 7px 0 0;
    text-align: right;
}

.blog-feeder {
    border: 0 none;
    float: left;
    height: 400px;
    margin-right: 15px;
    width: 278px;
    border: #ccc 1px solid;
}

.blog-title {
    background: #FFB57F;
    border: 0 none;
    color: #333333;
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    padding: 0 0 0 10px;
    width: 268px;
}

.blog-feeder-box {
    background: #FFFFFF;
    height: 353px;
    padding: 0 0 10px;
}

.facebook-feeder {
    border: 0 none;
    float: left;
    height: 400px;
    margin-right: 15px;
    width: 278px;
    border: #ccc 1px solid;
}

.facebook-title {
    background: #9EADCD;
    border: 0 none;
    color: #333333;
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    padding: 0 0 0 10px;
    width: 100%;
}

.facebook-feeder-box {
    background: #FFFFFF;
    height: 353px;
    padding: 0 0 10px;
    overflow: hidden;
}

.tweeter-feeder {
    border: 0 none;
    float: left;
    margin-right: 0px;
    border: #ccc 1px solid;
    overflow: hidden;
}

.tweeter-title {
    background: #7FD5F5;
    border: 0 none;
    color: #333333;
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    padding: 0 0 0 10px;
}

.tweeter-feeder-box {
    background: #FFFFFF;
    height: 353px;
    padding: 0 0 10px;
}

.hot-btns {
    width: 882px;
    height: 86px;
    float: left;
    margin-left: 20px;
    padding-top: 20px;
    background: url(../img/welcome-bg.jpg) no-repeat top right;
}

.hot-btns .invisalign-btn {
    float: left;
    width: 274px;
    height: 84px;
    margin-right: 20px;
}

.hot-btns .cqc-btn {
    float: left;
    width: 274px;
    height: 84px;
    margin-right: 20px;
}

.hot-btns .booknov-btn {
    float: left;
    width: 274px;
    height: 84px;
    margin-right: 20px;
}

.flash_bg2 {
    background-color: #CCCCCC;
    float: left;
    margin-right: 15px;
    padding: 5px;
    width: 300px;
}

#flash_bg {
    float: left;
    width: 211px;
    background-color: #CCCCCC;
    padding: 0;
    margin-right: 20px;
    z-index: 10;
}
video::-webkit-media-controls {
  display: none;
}
/*video {
  pointer-events: none;
}*/


.fees_table {
    background: #65c1cc;
}

.fees_table td {
    background: #e0eff4;
    padding: 6px;
}

.fees_table .heading {
    background: #65c1cc;
    line-height: 25px;
    color: #FFF;
    font-weight: bold;
}

.img_new {
    background: none repeat scroll 0 0 #c8e5eb;
    border: 1px solid #66bcc9;
    padding: 4px;
    margin: 0 15px 15px 0;
}

a.top-btn {
    background: url(../img/top-btn.png) 0 0 no-repeat;
    width: 302px;
    height: 13px;
    float: right;
    font-size: 11px;
    color: #FFF !important;
    text-decoration: none;
    padding: 6px 6px 6px 8px;
    text-align: left;
}

a:hover.top-btn {
    background: url(../img/top-btn.png) 0 -25px no-repeat;
    width: 302px;
    height: 13px;
    float: right;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    padding: 6px 6px 6px 8px;
}

#___plusone_0 {
    width: 68px !important;
}

.google-button {
    right: 0;
    position: absolute;
    top: -11px;
    right: 0;
}

.testimonials-box {
    background: url(../img/testimonials-bg.jpg) bottom left no-repeat #F1F9FB;
    width: 477px;
    height: 480px;
    padding: 10px;
}

.testimonials-box marquee {
    height: 333px;
}

.bullet-box {
    background: url(../img/bullet-box-bg.jpg) bottom left no-repeat #F1F9FB;
    width: 482px;
    padding: 10px 15px 0px 0px;
}

ul.list-style {
    margin-left: -25px;
}

ul.list-style li {
    background: url(../img/list-style-bg.jpg) 0px 2px no-repeat;
    list-style: none;
    padding: 0px 0px 0px 20px;
}

ul.green_arrow li {
    padding-bottom: 20px !important;
}

.offer-new {
    padding-bottom: 8px;
    border: 0px;
}

.offer-new a {
    border: 0px;
    text-decoration: none;
}

.offer-new a:hover {
    border: 0px;
    text-decoration: none;
}

.hot-btns div {
    margin: 0 83px !important;
}

.full_width img {
    width: 100%;
    margin-bottom: 15px;
}

.main-head {
    font-size: 20px;
}

.sub-head {
    font-weight: bold;
}

.photo-tag {
    margin-bottom: 15px;
}


/* Homepage banner carousel.
   These rules were previously dead: the author opened the block with a
   "slider banner start" comment and opened a second one at "slider banner
   end", but CSS comments do not nest, so everything between was commented
   out while the responsive overrides further down stayed live. index.php uses
   .banner_bg and .mySlides, so the desktop base styles are restored here.
   .slideshow-container is left out - no markup references it. */
.banner_bg {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	height: 400px;
	overflow: hidden;
}

.banner_bg img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.mySlides {
	display: none;
}

.mySlides img {
	vertical-align: middle;
}
.icon_menu {
    display: none;
}

.testi_img {
    background: url(../img/cqc-bnr-bg.png) left top no-repeat;
    text-decoration: none;
    height: 265px;
    color: #fff;
    width: 477px;
    padding: 10px;
    line-height: 22px;
}


/* Floating CQC badge and the sidebar button stack: base rules kept with
   the other components, their responsive overrides live below. */
.floating-obj {
    line-height: 1;
    position: fixed;
    height:59px;
    bottom: 200px;
    left:-1px;
}

ul.btn-hidden {
    position: absolute;
    top: 111px;
    left: 156px;
    display: none;
}

@media (max-width: 767px) {

#banner_email {
        width: 100%;
        padding-left: 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .wd_full {
        width: 100% !important;
    }

    .nn_pn {
        display: none;
    }

    .blk_tble {
        width: 100% !important;
        display: flex !important;
    }

    .dc_non {
        display: none;
    }

    .line_bx {
        display: contents;
    }

    .top_link {
        float: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hd_top_h1 {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .page_subnav {
        width: 49%;
    }

/*    ul#nav {
        width: 100%;
    }*/

    #sitemap ul#section li {
        width: 100%;
    }

    body {
        padding: 5px;
    }

    #address {
        display: none;
    }

    #left_part {
        overflow: unset;
        float: none;
        width: auto;
        background: none;
        margin: 0px 0 0 0;
        padding: 0px;
        min-height: auto;
    }

    #top_part {
        width: 100%;
        margin: 0 auto;
        float: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #main_navigation {
        height: auto;
        width: 100%;
        margin: 0px;
        margin-left: 0px;
        background-color: #fff;
    }

    .bac_nav_logo {
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 0px;
    }

    .icon_menu {
        float: right;
        background-color: #0194a8;
        padding: 10px 20px;
        color: #fff;
        font-size: 20px;
        border-radius: 4px;
        cursor: pointer;
        z-index: 10;
    }

    .icon_menu {
        display: block;
    }

    .nav_menu {
        display: none;
    }

    .logo_img {
        width: 145px;
    }

    #main_DIV {
        width: 100%;
    }

    .hot-btns {
        width: 100%;
        height: auto;
        float: left;
        margin-left: 0px;
        padding-bottom: 30px;
        background: none;
        text-align: center;
    }

    #rightside_part {
        overflow: unset;
        float: none;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .welcomebox {
        width: 100%;
        float: left;
        margin-left: 0px;
        padding: 20px 10px 10px 10px;
    }

    .blog-feeder {
        width: 100%;
    }

    .facebook-feeder {
        width: 100%;
    }

    .tweeter-feeder {
        width: 100%;
    }

    .feeder-boxes {
        width: 100%;
        float: unset;
        margin-left: 0px;
        display: block;
    }

    .blog-feeder {
        width: 100%;
    }

    .facebook-feeder {
        width: 100%;
    }

    .tweeter-feeder {
        width: 100%;
    }

    .blog-title {
        width: 100%;
    }

    .facebook-title {
        width: 100%;
    }

    .tweeter-title {
        width: 100%;
    }

    #end_footer {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    #sitemap {
        width: 100%;
    }

    .banner_bg img {
        margin-left: 0px;
        width: 100%;
    }

    .banner_bg {
        height: auto;
    }

    .hot-btns .booknov-btn,
    .hot-btns .cqc-btn {
        float: none;
        width: 100%;
    }

    .hot-btns div {
        margin: 15px 1px !important;
    }

    .top-strip {
        height: auto;
        padding: 10px;
    }

    #top_part {
        display: block;
        height: 40px;
    }

    /*=======================*/
    #right_part {
        overflow: unset;
        float: none;
        width: 100%;
    }

    #banner_chooseus {
      width: 100%;
      background-position: right;
      padding-left: 0;
    }
    /* The banner title sits over a photo, so on small screens it gets a white
       backing plate to stay readable. .banner-span is an inline element, hence
       display:block for the margin and full-width background to apply. */
    .banner-span {
      display: block;
      margin-top: 54px;
      padding: 10px;
      position: relative;
      z-index: 1;
      background: #fff;
    }
    .bullet-box {
        width: 100%;
        padding: 10px 2px 0px 0px;
    }

    #content {
        width: 100%;
        min-height: auto;
        margin-right: 5px;
        margin-left: 5px;
    }

    ul.list-style {
        padding-left: 0;
        padding: 10px;
        margin-left: 0;
    }

    /*================================*/

    /*===========================================*/
    /**=======================================**/
    #banner_tour {
        width: 100%;
        background-position: right;
        padding-left: 0;
    }

    .detl_part {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .detl_part .canvas0_0 img {
        width: 100%;
    }

    /*=======================================*/
    /*============================================*/
    #banner_team {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    .dispy_no {
        display: none;
    }

    #content {
        padding: 10px;
    }

    /*==============================================*/
    /*=================================================*/
    #banner_treatments {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 54px;
        background-color: #e0eaf6;
        background-size: cover;
    }

    #page_subnav {
        width: 100%;
    }

    #flash_bg {
        width: 100%;
    }

    .mb_wd {
        width: 100%;
        padding-left: 0px !important;
    }

    .img_new {
        padding: 4px;
        margin: 0 15px 15px 0;
        width: 100%;
        height: auto;
    }

    .tb_bg tr>td {
        width: 100% !important;
        display: block;
    }

    #banner_smile {
        width: 100%;
        padding-top: 80px;
        padding-bottom: 80px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #banner_npatients {
        width: auto;
        height: auto;
        /* padding-top: 159px; */
        /* padding-bottom: 30px; */
    }

    .btn_img {
        width: 100% !important;
        height: auto !important;
    }

    #banner_say {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    .testimonials-box {
        width: 100%;
        background: url(../img/testimonials-bg.jpg) bottom center no-repeat #F1F9FB;
    }

    .testi_img {
        background: url(../img/cqc-bnr-bg.png) right top no-repeat;
        height: auto;
        width: 100%;
        padding: 15px;
        background-color: #550051;
    }

    /*====================================================*/
    /*====================================================*/
    #banner_appoint {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #banner_fees {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    .facebook-banner img {
        border: 0;
        width: 100%;
        height: auto;
    }

    #banner_ref {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #banner_findus {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 60px;
        background-size: cover;
        color: #000;
    }

    #map1 {
        width: 100% !important;
    }

    .table_bk tr>td {
        display: block;
        width: 100%;
    }

    .blck_mobile {
        width: 100% !important;
        display: inline-block;
    }

    #before_after {
        float: left;
        width: 100%;
    }

    .imgfd {
        padding-left: 0px !important;
    }

    .left_img img {
        width: 100% !important;
        height: auto !important;
    }

    .left_img {
        width: 100%;
    }

    .tb_b tr>td {
        width: 100% !important;
        display: inline-block;
    }

    .im_mb_wd {
        width: 100% !important;
    }

    .wd_hd {
        width: 100% !important;
    }

    .tb_w {
        width: 100% !important;
    }

    .tb_w tr>td {
        width: 100% !important;
        display: inline-block;
    }

    /*====================================================*/
}

@media (min-width: 768px) and (max-width: 991px) {

#banner_npatients {
        height: 239px;
    }
    .nav_menu {
        display: none;
    }

    .banner_bg img {
        margin-left: 0px;
    }

    .banner_bg {
        height: 400px;
    }

    .nav_menu {
        display: none;
    }

    .icon_menu {
        display: block;
    }

    .icon_menu {
        float: right;
        background-color: #0194a8;
        padding: 10px 20px;
        color: #fff;
        font-size: 20px;
        border-radius: 4px;
    }

    #main_navigation {
        height: auto;
        width: 100%;
        margin: 0px;
        margin-left: 0px;
        background-color: #fff;
    }

    .bac_nav_logo {
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 0px;
    }

    .logo_img {
        width: 145px;
    }

    #left_part {
        overflow: unset;
        float: none;
        width: auto;
        background: none;
        margin: 30px 0 0 0;
        padding: 0px;
        min-height: auto;
    }

    #address {
        display: none;
    }

    .hot-btns div {
        margin: 0 35px !important;
    }

    #main_DIV {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    #rightside_part {
        margin: 0px !important;
        padding: 0px;
        float: left !important;
        width: 100%;
    }

    .top_link {
        padding-right: 50px;
    }

    .hot-btns {
        width: 100%;
        float: unset;
        margin-left: 0px;
        display: inline-flex;
    }

    .welcomebox {
        width: 100%;
        float: left;
        margin-left: 0px;
        padding: 20px 10px 10px 10px;
    }

    .blog-feeder {
        width: 100%;
    }

    .facebook-feeder {
        width: 100%;
    }

    .tweeter-feeder {
        width: 100%;
    }

    .feeder-boxes {
        width: 100%;
        float: unset;
        margin-left: 0px;
        display: flex;
    }

    .blog-feeder {
        width: 100%;
    }

    .facebook-feeder {
        width: 100%;
    }

    .tweeter-feeder {
        width: 100%;
    }

    .blog-title {
        width: 100%;
    }

    .facebook-title {
        width: 100%;
    }

    .tweeter-title {
        width: 100%;
    }

    #sitemap {
        width: 100%;
    }

    /*=======================*/
    #right_part {
        overflow: unset;
        float: none;
        width: 100%;
    }

    .bullet-box {
        width: 100%;
        padding: 5px 15px 0px 2px;
    }

    #content {
        width: 100%;
        min-height: auto;
        margin-right: 5px;
        margin-left: 5px;
        padding: 10px;
    }

    /*================================*/

    /*=======================================*/
    #banner_tour {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    .detl_part {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .detl_part .canvas0_0 img {
        width: 100%;
    }

    /*=======================================*/
    /*============================================*/
    #banner_team {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    /*==============================================*/
    /*=================================================*/
    #banner_treatments {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #page_subnav {
        width: 100%;
    }

    #banner_smile {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #banner_say {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    .testimonials-box {
        width: 100%;
        background: url(../img/testimonials-bg.jpg) bottom center no-repeat #F1F9FB;
    }

    .testi_img {
        background: url(../img/cqc-bnr-bg.png) right top no-repeat;
        height: auto;
        width: 100%;
        padding: 15px;
        background-color: #550051;
    }

    /*==================================================*/

    /*====================================================*/
    #banner_appoint {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #banner_fees {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #banner_ref {
        width: 100%;
        background-color: #e3e8eb;
        padding-left: 0px;
    }

    #banner_findus {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 68px;
        background-size: cover;
        color: #000;
    }

    /*====================================================*/
}

@media (min-width: 992px) and (max-width: 1199px) {

#main_DIV {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    #rightside_part {
        margin: 20px !important;
        padding: 0px;
        float: left !important;
    }

    .top_link {
        padding-right: 50px;
    }

    .hot-btns {
        width: 100%;
        float: unset;
        margin-left: 0px;
    }

    .welcomebox {
        width: 100%;
        float: unset;
        margin-left: 0px;
        padding: 20px 10px 10px 10px;
    }

    .feeder-boxes {
        width: 100%;
        float: unset;
        margin-left: 0px;
        display: flex;
    }

    .blog-feeder {
        width: 100%;
    }

    .facebook-feeder {
        width: 100%;
    }

    .tweeter-feeder {
        width: 100%;
    }

    .blog-title {
        width: 100%;
    }

    .facebook-title {
        width: 100%;
    }

    .tweeter-title {
        width: 100%;
    }

    #end_footer {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    #sitemap {
        width: 100%;
    }
}
@media (max-width: 601px){
    #copyright {
        display: grid;
    }
    #copyright-left{
        text-align: center;
        margin-left: 0px;
    }
    #copyright-right{
        text-align: center;
        margin-right: 0px;
    }
    #footer_img {
        height: 120px;
    }   
}
/* 767px, not 768px: the tablet range starts at min-width:768px, so the old
   value made both rules apply at exactly 768px. */
@media (max-width: 767px) {
    .floating-obj {
        display: none;
    }
}
@media (max-width: 991px){
    ul.btn-hidden {
    display: inline;
    }
}

/* ==========================================================================
   Book-now CTA banner
   Replaces assets/img/booknow-btn.png with markup + CSS, so the offer text is
   real (selectable, searchable, translatable) and stays sharp at any zoom.
   Colours and metrics sampled from the original 531x79 PNG:
     #0092a4 -> #014750 vertical gradient, #a3d8e6 border,
     26px left inset, 13px/15px bold text, chevron 21px from the right.
   ========================================================================== */
.cta-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	background: linear-gradient(to bottom, #0092a4 0%, #018494 45%, #014750 100%);
	border-radius: 8px;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	line-height: 1.25;
}

.cta-banner:link,
.cta-banner:visited {
	color: #ffffff;
	text-decoration: none;
}

.cta-banner:hover,
.cta-banner:focus {
	background: linear-gradient(to bottom, #00a3b8 0%, #019aac 45%, #015b66 100%);
	color: #ffffff;
	text-decoration: none;
}

.cta-banner__text {
	display: block;
}

.cta-banner__title {
	display: block;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

.cta-banner__sub {
	display: block;
	margin-top: 3px;
	font-size: 16px;
	font-weight: bold;
}

/* Chevron drawn from two borders - no image, scales with the text. */
.cta-banner__arrow {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-left: 16px;
	border-top: 3px solid #ffffff;
	border-right: 3px solid #ffffff;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.cta-banner:hover .cta-banner__arrow,
.cta-banner:focus .cta-banner__arrow {
	transform: rotate(45deg) translate(2px, -2px);
}

@media (max-width: 767px) {
	.cta-banner {
		min-height: 0;
		padding: 12px 16px;
	}

	.cta-banner__title {
		font-size: 13px;
	}

	.cta-banner__sub {
		font-size: 12px;
	}
}

/* Large promo variant of .cta-banner - replaces assets/img/offer-btn.png.
   Same teal gradient, stacked offer lines and an inset action button. */
.cta-banner--promo {
	flex-direction: column;
	align-items: stretch;
}

.cta-banner__note {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: bold;
}

/* The darker inset "call now" button inside the promo. */
.cta-banner__action {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 16px;
	padding: 10px 18px;
	background: rgba(0, 0, 0, 0.28);
	border-radius: 4px;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.cta-banner:hover .cta-banner__action,
.cta-banner:focus .cta-banner__action {
	background: rgba(0, 0, 0, 0.4);
}

.cta-banner__action .cta-banner__arrow {
	width: 9px;
	height: 9px;
	margin-left: 12px;
	border-top-width: 2px;
	border-right-width: 2px;
}

@media (max-width: 767px) {
	.cta-banner--promo {
		padding: 16px;
	}

	.cta-banner__note {
		font-size: 13px;
	}
}

/* Spacing utilities - carry the per-page margins the replaced <img> tags had
   in their inline styles. */
.u-mt-15 { margin-top: 15px; }
.u-mt-35 { margin-top: 35px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-38 { margin-bottom: 38px; }
.u-mb-45 { margin-bottom: 45px; }

/* Inlined from w3.css - the homepage banner used only these two rules, so the
   whole w3.css CDN was dropped rather than loaded for 2 declarations. */
.w3-content {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.w3-section {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

/* 404 page */
.error-links {
	margin: 0 0 24px 0;
}

.error-links li {
	padding-bottom: 8px;
}

.error-contact {
	margin: 0 0 24px 0;
	padding: 14px 18px;
	background: #e6f4f6;
	border-radius: 6px;
}

.error-contact p {
	padding: 0;
}

/* Feed panel headings use Boxicons glyphs instead of 22px icon images. */
.facebook-title .bx,
.tweeter-title .bx {
	float: right;
	font-size: 20px;
	line-height: inherit;
}

/* ==========================================================================
   6. Accessibility & progressive enhancement
   ========================================================================== */

/* Keyboard focus. The sprite menu links have no text, so without a visible
   focus ring a keyboard user cannot tell where they are. :focus-visible keeps
   it off for mouse clicks; the :focus fallback covers older browsers. */
a:focus,
button:focus,
input:focus,
textarea:focus {
	outline: 2px solid #0090a5;
	outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #0090a5;
	outline-offset: 2px;
}

#nav li a:focus-visible {
	outline: 2px solid #0090a5;
	outline-offset: -2px;
}

/* Skip link for keyboard and screen-reader users: visually hidden until focused. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1000;
	padding: 10px 16px;
	background: #0090a5;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* Images should never overflow their container on small screens. */
img {
	max-width: 100%;
	height: auto;
}

/* The sprite menu is a fixed-size background image; opting these out keeps
   the nav pixel-accurate. */
#nav li a img,
.logo_img {
	max-width: none;
}

/* Wide content (fee tables, before/after galleries) scrolls inside its own
   box rather than forcing the whole page sideways. */
.table_bk {
	max-width: 100%;
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   7. Print
   ========================================================================== */

@media print {
	.top-strip,
	.marquee-bar,
	#left_part,
	#top_part,
	.floating-obj,
	.hot-btns,
	.booknov-btn,
	.cqc-btn,
	.feeder-boxes,
	#sitemap,
	.icon_menu,
	ul.btn-hidden {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	#main_DIV,
	#right_part,
	#content {
		width: auto;
		max-width: 100%;
		float: none;
		margin: 0;
		padding: 0;
	}

	/* Spell out link targets, which are invisible on paper. */
	#content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		word-break: break-all;
	}
}