/*
  Theme Name: Northside Family Medicine
  Author: Whetham Solutions
  Author URI: https://whethamsolutions.com
  Description: Wordpress theme for Northside Family Medicine. Use of this theme outside of this company's website is strictly prohibited.
  Template: ion
  Text Domain: northsidefamilymedicine
*/

@font-face{font-family:candaralight_italic;src:url('fonts/candarali-webfont.woff2') format('woff2'),url('fonts/candarali-webfont.woff') format('woff');font-weight:400;font-style:normal}@font-face{font-family:candararegular;src:url('fonts/candara-webfont.woff2') format('woff2'),url('fonts/candara-webfont.woff') format('woff');font-weight:400;font-style:normal}

:root {
  --font: 'candararegular', sans-serif;
  --fontitalic: 'candaralight_italic', sans-serif;
  --heading: var(--font);
  --spacing: clamp(53px, 4.16667vw, 80px);
  --radius: clamp(8px, 0.625vw, 12px);
  --transition: 0.3s;
  --transitionSlow: 0.5s;
  --transitionFast: 0.1s;
  --mainFontSize: clamp(16px, 1.19792vw, 23px);
  --smallFontSize: clamp(13px, 0.67708vw, 13px);
  --h1FontSize: clamp(40px, 4.166666666666667vw, 80px);
  --h2FontSize: clamp(25px, 2.08333vw, 40px);
  --h3FontSize: clamp(20px, 1.5625vw, 30px);
  --h4FontSize: clamp(16px, 1.14583vw, 22px);
  --h5FontSize: clamp(16px, 1.14583vw, 22px);
  --h6FontSize: clamp(16px, 1.04167vw, 20px);
  --lineHeight: 1.5;
  --lineHeightSm: 1.3;
  --lineHeightLg: 2;
  --headingLineHeight: 1;
  --containerAbove1600: 1450px;
  --containerAbove1368: 1308px;
  --blue: #55c5cf;
  --green: #73c699;
  --text: #666666;
  --dark: #0E0E0F;
  --light: #B8B8B8;
  --primary: var(--blue);
  --secondary: var(--green);
  --buttonPaddingTop: clamp(9px, 0.72917vw, 14px);
  --buttonPaddingBottom: clamp(9px, 0.72917vw, 14px);
  --buttonPaddingLeft: clamp(20px, 1.5625vw, 30px);
  --buttonPaddingRight: clamp(20px, 1.5625vw, 30px);
  --buttonCasing: capitalize;
  --buttonRadius: clamp(8px, 0.625vw, 12px);
  --buttonFontSize: var(--mainFontSize);
  --buttonWeight: 400;
  --buttonFont: var(--font);
  --buttonTextColour: var(--dark);
  --buttonBackgroundPrimary: var(--primary);
  --buttonBackgroundSecondary: var(--secondary);
  --buttonBackgroundGhost: transparent;
  --buttonHoverBackgroundColour: var(--dark);
  --buttonHoverFontColour: #FFFFFF;
  --buttonDarkHoverBackgroundColour: var(--light);
  --buttonDarkHoverFontColour: #0E0E0F;
  --formFieldBorder: #C1C1C1;
  --formFieldPaddingTop: clamp(9px, 0.72917vw, 14px);
  --formFieldPaddingBottom: clamp(9px, 0.72917vw, 14px);
  --formFieldPaddingLeft: clamp(20px, 1.5625vw, 30px);
  --formFieldPaddingRight: clamp(20px, 1.5625vw, 30px);
  --formFieldRadius: clamp(8px, 0.625vw, 12px);
  --headerAdjustment: 32px;
}

.temp-hide {
    display: none !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading);
}

#header {
    border-top: clamp(5.3333333333333px, 0.41666666666667vw, 8px) solid var(--secondary);
    padding: clamp(13.333333333333px, 1.0416666666667vw, 20px) 0;
}

#header .navigation li:not(:first-child, :last-child) {
    margin-right: clamp(26.666666666667px, 2.0833333333333vw, 40px);
}

#header .navigation li:first-child {
    margin-right: auto !important;
}

#header .navigation li:first-child a, .mobile-logo a {
    display: flex;
    align-items: center;
}

/* #header .navigation li:first-child a span, .mobile-logo a span {
    color: var(--dark);
    font-size: clamp(13.333333333333334px, 1.0416666666666667vw, 20px);
    font-weight: 100;
    line-height: 1;
    margin-left: clamp(10.666666666666666px, 0.8333333333333334vw, 16px);
}

#header .navigation li:first-child a span strong, .mobile-logo a span strong {
    display: block;
    line-height: 1;
    font-weight: 700;
    font-size: clamp(20px, 1.5625vw, 30px);
} */

#header .navigation li:first-child a svg, .mobile-logo a img {
    display: block;
    width: clamp(140px, 10.416666666666666vw, 200px);
    height: auto;
    object-fit: contain;
}

#header .navigation li:not(#header .navigation li:first-child) a {
    color: var(--dark);
    text-transform: uppercase;
    font-size: clamp(18px, 1.1979166666666667vw, 23px);
}

#header .navigation li a:hover,
#header .navigation li a:focus,
#header .navigation li.current-menu-item a {
    color: var(--primary);
}

#hero {
    padding: clamp(133.33333333333px, 10.416666666667vw, 200px);
}

#hero h1 {
    color: #FFF;
    text-shadow: 0 0 clamp(10px, 0.78125vw, 15px) rgba(0,0,0,0.15);
}

#hero h1 + p {
    font-size: clamp(18px, 1.4583333333333vw, 28px);
    color: #FFF;
    text-shadow: 0 0 clamp(10px, 0.78125vw, 15px) rgba(0,0,0,0.15);
}

#hero .btn-group {
    margin-top: clamp(26.666666666667px, 2.0833333333333vw, 40px);
}

#footer {
    background-color: var(--primary);
    padding: clamp(26.666666666667px, 2.0833333333333vw, 40px);
}

#footer #copyright p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    color: var(--dark);
    font-size: 16px;
}

#footer #copyright p a {
    color: var(--dark);
}

#footer #copyright p a:hover,
#footer #copyright p a:focus {
    color: #FFF;
}

.section-heading h2 {
    color: var(--dark);
    margin: 0 0 clamp(13.333333333333px, 1.0416666666667vw, 20px);
}

.staff-container {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-gap: clamp(13.333333333333px, 1.0416666666667vw, 20px) !important;
    justify-content: center !important;
    margin: clamp(26.666666666667px, 2.0833333333333vw, 40px) 0 0 !important;
}

.staff-container > .staff-card {
    width: calc(25% - clamp(13.333333333333px, 1.0416666666667vw, 20px)) !important;
}

.staff-container > .staff-card .elementor-image-box-img {
    width: clamp(100px, 7.8125vw, 150px) !important;
    height: clamp(100px, 7.8125vw, 150px);
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto clamp(13.333333333333px, 1.0416666666667vw, 20px);
}

.staff-container > .staff-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-container > .staff-card h3.elementor-image-box-title {
    font-size: clamp(18px, 1.1979166666667vw, 23px);
    color: var(--dark);
}

.staff-container > .staff-card p.elementor-image-box-description {
    font-size: clamp(16px, 0.9375vw, 18px);
    color: var(--secondary);
    font-weight: 700;
}

#contact p, #officenews p {
    font-size: clamp(18px, 1.4583333333333vw, 28px);
    margin: 0 0 clamp(13.333333333333px, 1.0416666666667vw, 20px);
    color: var(--dark);
}

#contact p strong, #officenews p strong {
    display: block;
}

.section-clinic ul {
    margin: clamp(20px, 1.5625vw, 30px) 0 !important;
}

#contact ul li, #officenews ul li, .section-clinic ul li,
#contact ul li a, #officenews ul li a, .section-clinic ul li a {
    align-items: flex-start !important;
}

#contact ul li .elementor-icon-list-icon,
.section-clinic ul li .elementor-icon-list-icon {
    top: 5px;
}

#contact ul li:not(:last-child) {
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
}

.section-clinic ul li:not(:last-child) {
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

#contact ul li svg,
.section-clinic ul li svg {
    width: clamp(16.666666666667px, 1.3020833333333vw, 25px) !important;
    height: clamp(16.666666666667px, 1.3020833333333vw, 25px) !important;
}

#contact ul li .elementor-icon-list-text,
.section-clinic ul li .elementor-icon-list-text {
    color: var(--dark);
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

#contact ul li a .elementor-icon-list-text:hover,
#contact ul li a .elementor-icon-list-text:focus,
.section-clinic ul li a .elementor-icon-list-text:hover,
.section-clinic ul li a .elementor-icon-list-text:focus {
    color: var(--primary);
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

.alert-banner {
    background-color: var(--primary);
    padding: 30px !important;
}

.alert-banner p {
    color: #FFF;
    text-align: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

.alert-banner p a {
    color: #FFF;
    text-decoration: underline;
}

.alert-banner p a:hover,
.alert-banner p a:focus {
    color: #000;
}

.section-clinic h2 {
    color: var(--dark);
}

.section-clinic h2 strong {
    display: block;
    color: var(--secondary);
    font-size: clamp(16px, 1.09375vw, 21px);
    font-weight: 700;
    margin: clamp(3.3333333333333px, 0.26041666666667vw, 5px) 0 0;
}

.section-clinic .disclaimer p {
    font-size: 14px;
    font-family: var(--fontitalic);
}

.content-text.ct-left { padding: 0 clamp(20px, 1.5625vw, 30px) 0 0 !important; }
.content-text.ct-right { padding: 0 0 0 clamp(20px, 1.5625vw, 30px) !important; }

.content-img iframe, .content-img img {
    border-radius: var(--radius) !important;
}

#pg-title {
    background-color: var(--primary);
    padding: clamp(26.666666666667px, 2.0833333333333vw, 40px);
}

#pg-title h1 {
    color: #FFF;
    font-size: clamp(35px, 3.125vw, 60px);
}

.clinic-list {
    padding: 0 0 0 clamp(13.333333333333px, 1.0416666666667vw, 20px);
    column-count: 2;
    column-gap: clamp(50px, 3.90625vw, 75px);
}

.clinic-list li {
    line-height: 1.3;
    font-size: clamp(14px, 0.9375vw, 18px);
}

#contact .captcha-note p {
    font-size: clamp(14px, 0.8333333333333334vw, 16px);
}

#contact .contact-left {
    padding-right: clamp(20px, 1.5625vw, 30px);
    border-right: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #CCC;
}

#contact.contact-home > .e-con-inner {
    grid-gap: 0 !important;
    background-color: #F2F2F2;
}

#contact.contact-home.no-bg > .e-con-inner {
    background-color: unset;
}

#contact.contact-home .chome-right {
    padding: clamp(20px, 1.5625vw, 30px) !important;
}

#footer .elementor-image-box-wrapper {
    margin: 0 0 clamp(20px, 1.5625vw, 30px);
}

#footer .elementor-image-box-img {
    max-width: clamp(66.66666666666667px, 5.208333333333333vw, 100px);
}

#footer .elementor-image-box-description, #footer .elementor-image-box-description a {
    line-height: 1;
    color: var(--dark);
    font-size: clamp(13.333333333333334px, 1.0416666666666667vw, 20px);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 100;
}

#footer .elementor-image-box-description a {
    display: block;
    font-size: clamp(20px, 1.5625vw, 30px);
    font-weight: 700;
}

#footer .elementor-image-box-wrapper {
    display: flex;
    align-items: center;
}

#footer .elementor-image-box-img img {
    display: block;
}

#contact .hours-of-operation {
    list-style: none;
    padding: 0;
    margin: 30px 0 20px;
}

#contact .hours-of-operation li {
    margin: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    min-height: 52px;
    border-bottom: 1px solid #CFCFCF;
    padding: 0 15px;
    font-size: clamp(16px, 1.0416666666666667vw, 20px);
}

#contact .hours-of-operation li:last-of-type {
    border-bottom: none;
}

#contact .hours-of-operation li.active {
  background-color: var(--primary);
  color: #FFF;
  font-weight: 700;
}

#contact .hop-disclaimer {
    font-size: 16px !important;
}

.contact-disclaimer .elementor-icon-box-wrapper {
    background-color: #55c5cf;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 0 0 30px;
}

.contact-disclaimer svg {
    max-width: clamp(33.333333333333336px, 2.6041666666666665vw, 50px);
}

.contact-disclaimer * {
    color: #FFF !important;
}

.contact-disclaimer p {
    font-size: clamp(16px, 1.09375vw, 21px) !important;
    margin: 0 !important;
    line-height: 1.3;
}

.contact-disclaimer .elementor-icon-box-icon {
    margin: 0 20px 0 0 !important;
}

.contact-disclaimer svg * {
    fill: #FFF;
}

.contact-disclaimer .elementor-icon-box-content {
    display: flex;
    align-items: center;
}

#officenews > .e-con-inner {
    padding: 30px;
    background-color: #f2f2f2;
}

.disclaimer.grey {
    background-color: #f2f2f2;
    padding: 30px;
}

.disclaimer.grey p {
    color: #000;
}

.disclaimer.grey p:not(:last-of-type) {
    margin: 0 0 15px;
}

#resources ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    grid-gap: 20px;
    flex-wrap: wrap;
}

#resources ul li {
    width: calc(33% - 10px);
    margin: 0;
}

#resources ul li a {
    display: flex;
    background-color: #74c699;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
    padding: 15px;
    line-height: 1.3;
    border-radius: var(--buttonRadius);
}

#resources ul li a:hover, #resources ul li a:focus {
    background-color: #000;
    color: #FFF;
}

.section-heading.resources p {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto 30px;
}

@media (max-width: 991px) {
    #resources ul li {
        width: calc(50% - 10px);
    }
}

@media (max-width: 767px) {
    #resources ul li {
        width: 100%;
    }
}