/*
Theme Name: Dalton Plastic Surgery
Author: Sandlapper Creative
Author URI: https://www.sandlappercreative.com
Version: 1.0
*/

*,*::before,*::after{box-sizing:border-box;}html{overflow-y:scroll;font-size:100%;}body{margin:0;padding:0;line-height:1.5;}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}article,aside,figure,footer,header,main,nav,section{display:block;}ul{list-style:none;}ol{margin-left:1.5em;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:none;}a{font-size:100%;background:transparent;margin:0;padding:0;vertical-align:baseline;}a:hover,a:active{outline:0;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}img,video,svg{max-width:100%;height:auto;display:block;}td,td img{vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}th{vertical-align:bottom;font-weight:700;}td{font-weight:400;}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}pre{white-space:pre-wrap;word-wrap:break-word;}code,kbd,pre,samp{font-family:monospace,sans-serif;}small{font-size:85%;}strong{font-weight:700;}sub,sup{font-size:75%;line-height:0;position:relative;}sup{top:-0.5em;}sub{bottom:-0.25em;}input,button,select,textarea{margin:0;font:inherit;-webkit-appearance:none;appearance:none;}input,select{vertical-align:middle;}button,input[type="button"],input[type="submit"]{cursor:pointer;width:auto;overflow:visible;}label{cursor:pointer;}textarea{overflow:auto;vertical-align:top;}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0;}.alignright,img.alignright{float:right;margin:15px 0 15px 15px;}.aligncenter,img.aligncenter{display:block;margin:15px auto;}

/*Base*/
body{ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #666; background: #fff;}
body, select, input, textarea{ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.page-wrap{ padding-top: 50px;}

a{ color: #3399f3; text-decoration: none;}
a:hover, a:focus{ color: #0c7ae8; text-decoration: underline;}
.button, button, input[type="submit"]{ display: inline-block; cursor: pointer; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #fff; background-color: #446e9b; background-image: linear-gradient(to bottom, #6d94bf 0%, #446e9b 50%, #3e648d 100%); border: 1px solid #345578; border-radius: 4px;}
.button:hover, .button:focus, button:hover, button:focus, input[type="submit"]:hover{ color: #fff; background-image: linear-gradient(to bottom, #5c86b5 0%, #3d6289 50%, #375a7f 100%); text-decoration: none;}
.screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
.screen-reader:focus{ left: 10px; top: 10px; width: auto; height: auto; padding: 10px 15px; background: #fff; border: 2px solid #446e9b; z-index: 2000;}
:focus{ outline: 2px solid #446e9b; outline-offset: 2px;}
:focus:not(:focus-visible){ outline: none;}
:focus-visible{ outline: 2px solid #446e9b; outline-offset: 2px;}
a, img, .button, button{ transition: all .3s ease 0s;}

h1, h2, h3, h4, h5, h6{ font-weight: 500; line-height: 1.1; color: #2d2d2d;}
h1{ font-size: 36px; margin: 20px 0 10px;}
h2{ font-size: 30px; margin: 20px 0 10px;}
h3{ font-size: 24px; margin: 20px 0 10px;}
h4{ font-size: 18px; margin: 10px 0;}
h5{ font-size: 14px; margin: 10px 0;}
h6{ font-size: 12px; margin: 10px 0;}
p{ margin: 0 0 10px;}
hr{ border-top: 1px solid #eee; margin: 20px 0;}

.wrapper, .container{ width: 95%; max-width: 1170px; margin: 0 auto;}

/*Masthead*/
.masthead{ padding: 20px 0 10px;}
.wordmark{ font-family: "Alex Brush", cursive; font-size: 56px; line-height: 1.2; color: #446e9b; display: inline-block; margin: 0;}
.wordmark a{ color: #446e9b; text-decoration: none;}
.wordmark a:hover{ color: #2f4d6d; text-decoration: none;}
.tagline{ font-size: 36px; font-weight: 500; color: #2d2d2d; line-height: 1.1; margin: 0 0 10px;}

/*Navigation*/
.header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1030; min-height: 50px; background-color: #446e9b; background-image: linear-gradient(to bottom, #6d94bf 0%, #446e9b 50%, #3e648d 100%); border-bottom: 1px solid #345578;}
.header .container{ display: flex; align-items: center; justify-content: space-between;}
.nav-home{ display: block; padding: 15px; color: #fff; font-size: 16px; line-height: 20px;}
.nav-home:hover, .nav-home:focus{ color: #fff; text-decoration: none;}

.nav ul{ list-style: none; margin: 0; padding: 0; display: flex;}
.nav ul li{ position: relative;}
.nav ul a{ display: block; padding: 15px; color: #fff; font-size: 14px; line-height: 20px; text-decoration: none;}
.nav ul li.current-menu-item > a, .nav ul li.current-menu-ancestor > a, .nav ul li:hover > a, .nav ul a:focus{ color: #fff; background-color: #3a5f87; text-decoration: none;}
.nav ul ul{ display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background-color: #446e9b; border: 1px solid #345578; border-top: 0; flex-direction: column; z-index: 1040;}
.nav ul ul li{ float: none; width: 100%;}
.nav ul ul a{ padding: 8px 15px;}
.nav ul li:hover > ul, .nav ul li:focus-within > ul{ display: flex;}
.nav-utility{ display: flex; align-items: center; gap: 15px;}
.nav-utility a{ color: #fff; font-size: 14px;}
.nav-utility a:hover{ color: #fff; text-decoration: underline;}

.nav-toggle{ display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: none; border: none; padding: 0; margin: 15px 0; cursor: pointer;}
.nav-toggle span{ display: block; width: 100%; height: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease;}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){ opacity: 0;}
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg);}
.nav-toggle:hover, .nav-toggle:focus{ background: none;}

.mobile-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1998; opacity: 0; pointer-events: none; transition: opacity .3s ease;}
.mobile-overlay.is-visible{ opacity: 1; pointer-events: auto;}
.mobile-nav{ position: fixed; top: 0; right: -320px; width: 300px; max-width: 85vw; height: 100%; background: #fff; z-index: 1999; padding: 20px; overflow-y: auto; transition: right .3s ease; box-shadow: -2px 0 10px rgba(0,0,0,.15);}
.mobile-nav.is-open{ right: 0;}
.mobile-nav-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.mobile-nav-header .wordmark{ font-size: 32px;}
.mobile-nav ul{ list-style: none; margin: 0; padding: 0;}
.mobile-nav ul ul{ margin-left: 15px;}
.mobile-nav ul a{ display: block; padding: 10px 0; border-bottom: 1px solid #eee; color: #446e9b;}
.nav-close{ background: none; border: none; font-size: 2rem; line-height: 1; padding: 0; color: #446e9b; cursor: pointer;}
.nav-close:hover, .nav-close:focus{ background: none; color: #2f4d6d;}
body.nav-open{ overflow: hidden;}

/*Layout*/
.layout{ display: flex; flex-wrap: wrap; gap: 0 8.33%; padding-bottom: 40px;}
.content{ flex: 1 1 0; min-width: 0;}
.sidebar{ flex: 0 0 25%; max-width: 25%;}
.layout.full .content{ flex: 1 1 100%;}

.content p:first-child{ margin-top: 0;}
.content ul{ list-style: disc; margin: 15px 0 15px 30px;}
.content ol{ margin: 15px 0 15px 30px;}
.content img{ max-width: 100%; height: auto;}
.content .page-heading{ font-size: 24px; font-weight: 500; color: #2d2d2d; margin: 0 0 15px;}
img.shadow{ box-shadow: 4px 4px 10px 0px #777; margin-bottom: 10px;}

/*Breadcrumb*/
.breadcrumb{ font-size: 14px; color: #999; margin: 0 0 10px;}
.breadcrumb a{ color: #3399f3;}

/*Sidebar Modules*/
/* Modules are bare wrappers on the live site - no background, no padding, no
   radius. The column reads as one continuous block; giving these a card
   treatment is what broke it apart. Spacing comes from the paragraphs inside. */
.sidebar-module{ margin: 0;}
.sidebar-module p{ margin: 0 0 10px;}
.sidebar-module hr{ border-top: 1px solid #3399f3; margin: 2px 0;}
.sidebar-module img{ margin: 0;}
.address-link{ color: inherit;}
.address-link:hover, .address-link:focus{ color: inherit; text-decoration: underline;}
/* Procedure nav - the legacy Bootstrap .list-group: collapsed 1px borders, a
   solid header row, rounded top and bottom corners only. */
.sidebar-nav{ list-style: none; margin: 0 0 10px; padding: 0;}
.sidebar-nav li{ margin: 0;}
.sidebar-nav a{ display: block; position: relative; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; color: #555;}
.sidebar-nav a:hover, .sidebar-nav a:focus{ background-color: #f5f5f5; color: #2f4d6d;}
.sidebar-nav li:first-child a{ border-radius: 4px 4px 0 0;}
.sidebar-nav li:last-child a{ margin-bottom: 0; border-radius: 0 0 4px 4px;}
.sidebar-nav li.nav-head a{ z-index: 2; background-color: #446e9b; border-color: #446e9b; color: #fff;}
.sidebar-nav li.nav-head a:hover, .sidebar-nav li.nav-head a:focus{ background-color: #3a5f87; border-color: #3a5f87; color: #fff;}
.sidebar-nav li.current a{ background-color: #f5f5f5; font-weight: 600; color: #2f4d6d;}

/*Home Columns*/
.home-columns{ display: flex; flex-wrap: wrap; gap: 30px; margin: 25px 0 45px;}
.home-column{ display: flex; flex-direction: column; flex: 1 1 calc(33.333% - 20px); min-width: 220px; border-top: 1px solid #ddd; padding-top: 20px;}
/* The Spanish page runs the same columns without the hairline above them. */
.home-columns.no-rules .home-column{ border-top: 0; padding-top: 0;}
.home-column img{ margin-bottom: 15px;}
.home-column h3{ font-size: 24px; color: #3399f3; margin: 0 0 10px;}
.home-column h3 a{ color: inherit;}
.home-column p{ margin-bottom: 15px;}
/* Pushes every button to the bottom of its column so the three line up even
   though the blurbs are different lengths. */
.home-column .button{ align-self: flex-start; margin-top: auto;}

/*Before & After Galleries*/
.gallery-intro{ margin: 30px 0 10px;}
.case{ margin: 0 0 40px; padding-bottom: 30px; border-bottom: 1px solid #eee;}
.case:last-child{ border-bottom: 0;}
.case h3{ font-size: 20px; margin: 0 0 15px; color: #446e9b;}
.case-views{ display: flex; flex-wrap: wrap; gap: 20px;}
.case-view{ flex: 1 1 calc(33.333% - 14px); min-width: 180px;}
.case-view-label{ font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #999; margin: 0 0 8px;}
.case-pair{ display: flex; gap: 8px;}
.case-pair figure{ flex: 1 1 50%; margin: 0;}
.case-pair figcaption{ font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-top: 4px; text-align: center;}
.case-pair img{ width: 100%; border: 1px solid #ddd; border-radius: 3px;}
.case-pair a:hover img{ border-color: #446e9b;}
.gallery-empty{ padding: 20px; background: #f5f5f5; border-radius: 4px; color: #777;}

/*Staff*/
.staff-list{ margin-top: 25px;}
.staff-member{ display: flex; gap: 25px; padding: 25px 0; border-top: 1px solid #ddd;}
.staff-member:first-child{ padding-top: 0; border-top: 0;}
.staff-photo{ flex: 0 0 160px;}
/* Fixed frame so a 135x202 thumbnail and a 3102x4661 original land the same
   size. Beats .content img on specificity, which would force height:auto. */
.staff-member .staff-photo img{ width: 160px; height: 240px; object-fit: cover; object-position: top center; margin: 0; box-shadow: 4px 4px 10px 0 #777;}
.staff-body{ flex: 1 1 auto; min-width: 0;}
.staff-body > *:first-child{ margin-top: 0;}
.staff-member h3{ font-size: 20px; margin: 0 0 5px; color: #2d2d2d;}

/*Products*/
.product-list{ margin-top: 20px;}
.single-product{ display: flex; gap: 25px; align-items: flex-start; padding: 25px 0; border-bottom: 1px solid #eee;}
.single-product:last-child{ border-bottom: 0;}
.product-image{ flex: 0 0 180px;}
.product-content{ flex: 1 1 auto;}
.product-content h3{ margin-top: 0; color: #446e9b;}

/*FAQ*/
.faq-list{ margin-top: 20px;}
.faq-item{ border-bottom: 1px solid #eee; padding: 15px 0;}
.faq-item:last-child{ border-bottom: 0;}
.faq-question{ width: 100%; text-align: left; background: none; border: none; padding: 0; font-size: 18px; font-weight: 500; color: #446e9b; cursor: pointer; display: flex; justify-content: space-between; gap: 15px; align-items: center;}
.faq-question:hover, .faq-question:focus{ background: none; color: #2f4d6d;}
.faq-question::after{ content: "+"; font-size: 22px; line-height: 1; flex: 0 0 auto;}
.faq-question[aria-expanded="true"]::after{ content: "\2013";}
.faq-answer{ display: none; padding-top: 12px;}
.faq-item.is-open .faq-answer{ display: block;}
.faq-outro{ margin-top: 25px;}

/*Service FAQ Panel*/
/* The legacy pages wrapped these in Bootstrap .panel-success (miraDry, green)
   and .panel-warning (miraSmooth, amber). */
.faq-panel{ margin: 30px 0; border: 1px solid #ddd; border-radius: 4px;}
.faq-panel-heading{ padding: 10px 15px; border-bottom: 1px solid #ddd; border-radius: 3px 3px 0 0; font-weight: 600;}
.faq-panel-list{ list-style: none; margin: 0; padding: 0;}
.faq-panel-list li{ padding: 12px 15px; border-top: 1px solid #eee;}
.faq-panel-list li:first-child{ border-top: 0;}
.faq-panel-list strong{ display: block; margin-bottom: 4px; color: #2d2d2d;}
.faq-panel-list p{ margin: 0 0 8px;}
.faq-panel-list p:last-child{ margin-bottom: 0;}
.faq-panel-green{ border-color: #d6e9c6;}
.faq-panel-green .faq-panel-heading{ background-color: #dff0d8; border-bottom-color: #d6e9c6; color: #3c763d;}
.faq-panel-amber{ border-color: #faebcc;}
.faq-panel-amber .faq-panel-heading{ background-color: #fcf8e3; border-bottom-color: #faebcc; color: #8a6d3b;}
.faq-panel-neutral .faq-panel-heading{ background-color: #f5f5f5; color: #2d2d2d;}
.service-outro{ margin-top: 25px; text-align: center;}
.service-outro hr{ margin-bottom: 20px;}

/*Forms*/
.gform_wrapper form{ margin-top: 20px;}
.gform_wrapper .gform_fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; padding: 0; list-style: none;}
.gform_wrapper .gfield{ margin: 0 0 15px; padding: 0;}
.gform_wrapper .gfield--width-full, .gform_wrapper .gfield.full-width, .gform_wrapper .gfield textarea{ grid-column: 1 / -1;}
.gform_wrapper .gfield:has(textarea){ grid-column: 1 / -1;}
.gform_wrapper label, .gform_wrapper .gfield_label{ display: block; margin-bottom: 5px; font-weight: 600; color: #2d2d2d; font-size: 14px;}
.gform_wrapper .gfield_required{ color: #a94442; margin-left: 2px;}
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper textarea, .gform_wrapper select{ width: 100%; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; color: #666; background: #fff;}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus{ border-color: #446e9b;}
.gform_wrapper textarea{ min-height: 140px;}
.gform_wrapper .gform_footer{ margin-top: 10px;}
.gform_wrapper .validation_message{ color: #a94442; font-size: 13px; margin-top: 4px;}
.gform_wrapper .gform_validation_errors{ padding: 12px 15px; margin-bottom: 20px; border: 1px solid #ebccd1; border-radius: 4px; background: #f2dede; color: #a94442;}
.gform_confirmation_message{ padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; background: #dff0d8; color: #3c763d;}

.search-form{ display: flex; gap: 8px; margin-top: 20px;}
.search-input{ flex: 1; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;}

/*Pagination*/
.navigation{ padding: 0; text-align: center; margin-top: 30px;}
.navigation ul{ list-style: none; margin: 0; padding: 0;}
.navigation li{ display: inline-block;}
.navigation li a, .navigation li span{ display: inline-block; padding: 6px 12px; text-decoration: none; color: #446e9b; background-color: #fff; border: 1px solid #ddd; cursor: pointer;}
.navigation li a:hover, .navigation li span.current{ color: #fff; background-color: #446e9b; border-color: #345578;}

/*Footer*/
/* Dark ground, white text, #3399f3 links - matches the live site. */
.footer{ background-color: #383838; padding: 15px 0 0; margin-top: 40px; font-size: 14px; color: #fff;}
.footer .container{ display: flex; flex-wrap: wrap; gap: 0 30px;}
.footer-column{ flex: 0 1 auto; min-width: 160px;}
.footer-column.footer-social{ margin-left: auto;}
.footer p{ margin: 0 0 10px;}
.footer a{ color: #3399f3;}
.footer a:hover, .footer a:focus{ color: #66b3f7;}
.footer .credit{ flex: 1 1 100%; padding: 15px 0; border-top: 1px solid #4a4a4a; margin: 5px 0 0;}

.video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 30px;}
.video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.search-results .wrapper, .error404 .wrapper{ padding: 60px 0;}
.search-results article{ margin-top: 30px; padding-top: 30px; border-top: 1px solid #eee;}
.search-results article:first-child{ border-top: 0; padding-top: 0; margin-top: 0;}
.error404 .content{ padding: 60px 0 100px; text-align: center;}


@media (max-width: 900px) {
	.nav{ display: none;}
	.nav-utility{ display: none;}
	.nav-toggle{ display: flex;}
	.mobile-overlay{ display: block;}
	.wordmark{ font-size: 36px;}
	.tagline{ font-size: 26px;}
	.layout{ display: block;}
	.sidebar{ max-width: 100%; margin-top: 30px;}
	.case-view{ flex: 1 1 100%;}
	.single-product{ display: block;}
	.product-image{ margin-bottom: 15px;}
	.gform_wrapper .gform_fields{ grid-template-columns: 1fr;}
	.footer .container{ display: block;}
	.footer-column{ margin-bottom: 20px;}
	.footer-column.footer-social{ margin-left: 0;}
}

@media (max-width: 600px) {
	.wordmark{ font-size: 30px;}
	.tagline{ font-size: 22px;}
	.home-column{ flex: 1 1 100%;}
	.staff-member{ display: block;}
	.staff-member .staff-photo img{ margin-bottom: 15px;}
}

@media print {
	.header, .footer, .nav, .search-form, .sidebar, .mobile-nav, .mobile-overlay{ display: none;}
	.page-wrap{ padding-top: 0;}
	body{ font-size: 12pt; color: #000;}
	a{ color: #000; text-decoration: underline;}
	a[href]::after{ content: " (" attr(href) ")";}
}