/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.2
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/


/* 
CONTENTS
  1. Global Styles
  2. Main/Mobile Menu Styles
  3. Gravity Forms Styles
  4. City Pages
  5. Clinic Page Template
  6. Provider Archive Page Template
  7. Provider Single Page Template
  8. Lazy-Load YouTube CSS
  9. Blog Layout
  10. Footer Styles
*/


/* 1. Global Styles */
:root {
  --light-orange: #ffe1da;
  /*Responsive Font Sizes*/
  --fs-base: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
  --fs-md: clamp(1.2rem, 0.48vi + 1.08rem, 1.46rem);
  --fs-lg: clamp(1.44rem, 0.84vi + 1.23rem, 1.9rem);
  --fs-xl: clamp(1.73rem, 1.35vi + 1.39rem, 2.47rem);
  --fs-2xl: clamp(2.07rem, 2.07vi + 1.56rem, 3.21rem);
  --lh-150: 1.5;
}

/*Set responsive font sizes and bottom margin to 0.6 font size*/
h1 {
  font-size: var(--fs-xl);
  line-height: 1.3;
  margin-bottom: calc(var(--fs-xl) * .6);
}

h2 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin-bottom: calc(var(--fs-lg) * .6);
}

h3 {
  font-size: var(--fs-md);
  line-height: 1.3;
  margin-bottom: calc(var(--fs-md) * .6);
}

h4, h5, h6 {
  font-size: var(--fs-base);
  line-height: 1.3;
  margin-bottom: calc(var(--fs-base) * .6);
}

.callout-text {
  font-family: Lora, serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--porto-tertiary-light-5);
}

.white-text,
.white-text p,
.white-text a,
.white-text h1, 
.white-text h2, 
.white-text h3, 
.white-text h4, 
.white-text h5, 
.white-text h6 {
  color: white !important;
}

.btn-primary {
  background-color:var(--porto-primary-color,#146ec8);
  border-color:var(--porto-primary-color,#146ec8);
  color:var(--porto-primary-color-inverse,#FFF);
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
  border-color:var(--porto-primary-dark-10,#10559a);
  background-color:var(--porto-primary-dark-10,#10559a);
  color:var(--porto-primary-color-inverse,#FFF);
}

.btn-tertiary {
  background-color:var(--porto-tertiary-color,#002858);
  border-color:var(--porto-tertiary-color,#002858);
  color:var(--porto-tertiary-color-inverse,#FFF);
}
.btn-tertiary:active,
.btn-tertiary:focus,
.btn-tertiary:hover {
  border-color:var(--porto-tertiary-dark-5,#001d3f);
  background-color:var(--porto-tertiary-dark-5,#001d3f);
  color:var(--porto-tertiary-color-inverse,#FFF);
}

hr {
  background: var(--porto-quaternary-color);
  margin: 30px 0;
}

.no-indent {
  padding-left: 0;
}

.indent-sm {
  padding-left: 1rem;
}

/*Override Container Width*/
.full-width {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

/*Remove Page Padding*/
.main-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*Remove top border on Porto Section*/
.section {
  border-top: none !important;
}

/*Fix Bold Lists & Add Spacing*/
li {
  font-weight: 400;
  margin-bottom: 6px;
}

ul > li > ul > li:first-child {
  margin-top: 6px;
}

.feature-box-info a{
  font-weight: 600;
}

/*Adding Padding Back to Skin Buttons
.btn-primary, btn-secondary {
  padding: 14px;
}*/

/*Call to Action Style Fix*/
@media (max-width: 856px) {
  .vc_general.vc_cta3 {
      padding: 2rem 1rem;
  }
}

.vc_cta3-content-header {
  margin-bottom: 20px;
}

.vc_cta3-actions {
  margin-top: 30px;
}

.vc_cta3-content p {
  line-height: 1.4;
}

/* 2. Main/Mobile Menu Styles */
#header .header-main {
  border-bottom: 2px inset var(--porto-gray-2);
}

/*Correct styling on mega menu*/
#header .porto-wide-sub-menu > li > a {
  font-weight: 400 !important;
  text-transform: none !important;
}

#header .porto-wide-sub-menu > li > a:hover {
  color: var(--porto-primary-color);
}

/*Override Flat Menu Border*/
.mega-menu.menu-flat > li.menu-item.active > a,
.mega-menu.menu-flat > li.menu-item:hover > a {
  border-radius: 2rem !important;
}

/*Request an Appointment Header Link*/
.request-waterfall-link a {
  padding: .8rem 2rem !important;
  color: white !important;
  background-color: var(--porto-primary-color) !important;
  text-align: center !important;
  border-radius: 2rem !important;
}

.request-waterfall-link a:hover,
.request-waterfall-link a:active,
.request-waterfall-link a:focus {
 background-color: var(--porto-quaternary-color) !important;
 color: var(--light-orange) !important;
}

/*Drop Navigation Below Logo and Before Mobile Menu*/
@media (min-width: 992px ) and (max-width: 1325px ) {
  .header-main {
    flex-direction: column;
    align-items: center;
    padding: 0 0.5rem;
  }
  
  .header-main .header-logo-left, .header-main .header-menu-right {
    text-align: center !important;
    margin-right: 0;
    margin-left: 0;
    justify-content: center;
  }
}


@media only screen and (min-width: 991px) {
  .more-conditions {
      margin-left: 40% !important;
  }
}

/*Mobile Menu Fix*/
#nav-panel {
  height: calc(100vh - 84px);
}

#nav-panel .mobile-nav-wrap {
  max-height: calc(100vh - 84px) !important;
  padding-bottom: 80px !important;
}

.sticky > #nav-panel {
  height: calc(100vh - 60px);
  background-color: white;
}

.sticky > #nav-panel .mobile-nav-wrap {
  max-height: calc(100vh - 60px) !important;
  padding-bottom: 80px !important;
}

#nav-panel .accordion-menu > li > a, #nav-panel .accordion-menu li.menu-item > a {
  text-transform: none;
  font-weight: 400;
  font-size: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

#nav-panel .accordion-menu .arrow {
  font-size: 24px;
  margin-top: 8px;
}

.mobile-toggle .fa-bars {
  font-size: 20px;
}

.accordion-menu:first-of-type {
  margin-bottom: 2rem;
}


/*3. Gravity Forms Styling*/
.gform_wrapper.gravity-theme .gfield_label {
  margin-top: 5px;
  font-weight: 600 !important;
}

.gfield_description, .gchoice {
  font-weight: 400;
}

.gfield_description {
margin-top: 0 !important;
}

.ginput_total, .ginput_total:focus, .cm-hipaa-multifile-upload-input {
  border: white !important;
}

.cc-entry-info legend {
font-size: 15px;
}

.gf-section-divider {
  margin-top: 2rem;
}

.gf-section-divider h3 {
margin-bottom: 8px;
}

.gform_submission_error {
margin-bottom: 0;
}


/* 4. City Page Styles */
.cta-background {
  background-color: white;
  border-radius: 20px;
  margin: 0 10px;
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(450px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .new-animation {
    opacity: 0;
  }
  
  .play-animation, .show {
    animation: fade-in-down 2s ease-out 0s 1 normal forwards;
    /*visibility: visible !important;*/
  }

  .play-fade-in-up {
    animation: fade-in-up 2s ease-out 0s 1 normal forwards;
    visibility: visible !important;
  }
}

.fade-in-up, .animation {
  visibility: hidden;
}

.fade-in-up-container {
  overflow: hidden;
  height: 40vh;
  position: relative;
}

.fade-in-up-container img{
  height: 40vh;
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
}

.cta-content {
  padding: 1.8rem 3rem 0 3rem;
}

@media (max-width: 856px) {
    .cta-content {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.data-column {
  columns: 225px 4;
  padding-left: 0;
}

.data-column a, .location-link a, .specialties-columns a {
  text-decoration: none;
}

.specialties-columns {
  columns: 250px 3;
}

.county-text h4 {
  margin-bottom: 5px;
}

.armhs-marker, .clinic-contact-icon {
  font-size: 28px;
  text-align: left;
  margin-right: 10px;
  color: var(--porto-skin-dark-5);
}

.county-text {
  display: flex;
  margin-bottom: 12px;
}

.toggle-title label {
  font-size: 1rem !important;
}

.marriage-specialties {
  columns: 375px 2;
}

.video-border {
  border: 1px solid var(--porto-tertiary-color);
}


/* 5. Clinic Page Template*/
.clinic-contact-icon {
  margin-top: -10px;
  margin-right: 20px;
}

.clinic-contact-icon .fas {
  color: var(--porto-quaternary-color);
}

.contact-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.template-button, .template-button-sm, .button-primary {
  color: white;
  font-weight: 500;
  padding: 0.8rem;
  border-radius: 30px;
  border: none;
  background-color: var(--porto-primary-color);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.template-button {
  width: 95%;
}

.template-button-sm {
  min-width: 300px;
}

.template-button:active,
.template-button:focus,
.template-button:hover,
.template-button-sm:active,
.template-button-sm:focus, 
.template-button-sm:hover
.button-primary:active,
.button-primary:focus,
.button-primary:hover {
  background-color:var(--porto-primary-dark-10,#10559a);
}

.clinic-video video {
  border: 1px solid var(--porto-gray-5);
}

.services-section h5 {
  margin-bottom: 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--porto-gray-bg);
  font-size: 16px;
}

.services-section ul {
  list-style-type: none;
}

.services-section li a {
  color: var(--porto-dark-color);
}

.hours-section {
  border-radius: 30px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  padding: 2rem;
}

.hours-section h5 {
  margin-bottom: 0;
}

.hours-section p {
  margin-bottom: 0;
}


/* 6. Provider Archive Page Templates */
.provider-archive-photo {
  margin-bottom: 0.5rem;
  margin-top: -150px;
}

.provider-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 1rem;
  /*text-align: center;*/
}

.provider-single-card {
  display: grid;
  align-items: start;
  justify-items: center;
  text-align: center;
  padding: 1rem;
  border-radius: 20px;
  background-color: var(--porto-gray-2);
  margin-top: 150px;
  max-width: calc(100vw - 40px);
}

.searchandfilter ul {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-left: 0;
}

.searchandfilter label, .sf-input-text, .sf-input-select {
  width: 100%;
}

.searchandfilter  ul  li:first-of-type {
	min-width: 100%;
  padding-right: 0.5rem;
}

.searchandfilter  ul  li {
	margin: 0 0.3rem !important;
  flex: min-content;
  min-width: 175px;
}

.sf-field-reset input {
  width: 100%;
  max-width: 250px;
  margin-top: 1rem;
}

.sf-field-reset {
  min-width: 100% !important;
  font-size: 18px;
}

.search-filter-reset::before {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  margin-right: 8px;
}

.sf-field-submit {
  display: none !important; /*hide button since form auto-submits*/
}


/* 7. Provider Single Page Template */
.provider-single-photo, .provider-archive-photo {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0px 0px 0px 6px var(--porto-secondary-color),
              0px 8px 10px 0px rgba(14, 30, 37, 0.12), 
              0px 8px 22px 0px rgba(14, 30, 37, 0.32);
}

.provider-single-photo {
  margin-bottom: -45px;
}

/*Add Commas to Services/Locations*/
.comma::after {
  content: ", ";
}
.comma:last-child::after {
  content: "";
}

.specialties-container {
  background-color: var(--porto-light-color);
  border-radius: 20px;
}

.specialties-sidebar {
  columns: 3 150px;
  font-size: 15px;
  list-style-type: none;
  padding-left: 0;
  margin-bottom: none;
}

.specialties-sidebar li {
    line-height: 1.5;
    margin-bottom: 6px;
    break-inside: avoid-column;
}

.icon-section .fas {
  color:var(--porto-quaternary-color);
  padding-right: 8px;
}

/*Call to Action Provider Schedule Section*/
.provider-cta-background {
  border-radius: 25px;
  background-color: var(--porto-light-color);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.provider-cta-button {
  padding: 0.8rem 3rem;
  border-radius: 30px;
  color: white;
  background-color: var(--porto-tertiary-color);
  border: none;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.provider-cta-button:active,
.provider-cta-button:focus,
.provider-cta-button:hover {
  background-color: var(--porto-tertiary-dark-5);
}

/*Provider Locations Template Part*/
.button-outlined-dark {
  color: var(--porto-tertiary-color);
  padding: .7rem 2.5rem;
  border-radius: 30px;
  background-color: white;
  border: 2px solid var(--porto-tertiary-color);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.button-outlined-dark:active,
.button-outlined-dark:focus,
.button-outlined-dark:hover {
  background-color: var(--porto-tertiary-color);
  border: 2px solid var(--porto-tertiary-color);
  color: white;
}

.provider-google-map iframe {
  height: 250px;
}

/*Provider Single Footer*/
.provider-footer-bkgd {
  border-radius: 25px;
  background-color: var(--porto-light-color);
  padding-top: 2.5rem;
  padding-bottom: 1.75rem;
}

/* 8. Lazy Load YouTube Video Styles*/
.embed-youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
  width: 68px;
  height: 48px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.embed-youtube .embed-youtube-play:hover {
  background-color: #f00;
}


/* 9. Blog Layout */
.post-meta i {
  color: var(--porto-quaternary-color);
}


/* 10. Locations Search Component */
#custom-search {
  margin-bottom: 4rem !important;
}

.location-search-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  row-gap: 50px;
  margin: 2rem 0 4rem;
}

.location-search-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 8px;
  .btn {
    padding: 0.5rem 2rem;
  }
}

.location-search-item-image-wrap {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

#search-form {
  width: 100%;
  display: flex;
  gap: 12px;
  input {
    width: 100%;
    border: 1px solid #9c9c9c;
    border-radius: 8px;
    padding: 1.75rem 1.5rem;
    &::placeholder {
      color: #9c9c9c;
    }
  }
  button {
    border-radius: 50%;
    background-color: #ee6e59;
    border-radius: 50px;
    border: initial;
    padding: 1rem 2.5rem;
    transition: background-color 0.15s ease;
    &:hover {
      background-color: #d46251;
    }
  }
}


.location-no-results {
  display: flex;
  justify-content: center;
  text-align: center;
  grid-column: 2;
}

#custom-search {
  position: relative;
}

#view-toggle-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    font-size: 18px;
    border-radius: 50px;
    min-width: 300px;
  }
}

#search-loading {
  text-align: center;
  margin: 1em 0;
}

.spinner {
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #000;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  /* locations */
  .location-search-wrap {
    grid-template-columns: 1fr 1fr;
  }
  #custom-search {
    form {
      flex-direction: column;
    }
  }
}

@media (max-width: 375px) {
  /* locations */
  .location-search-wrap {
    grid-template-columns: 1fr;
  }
}


/*Fix Blog Home Image on Mobile*/
@media (max-width: 570px) {
  .thumb-info-side-image .thumb-info-side-image-wrapper {
      padding: 0;
      width: 100%;
      padding-bottom: 30px;
  }
}

@media (min-width: 571px) {
  .thumb-info-side-image-wrapper .img-responsive {
       width: 300px;
       height: 300px;
       object-fit: cover;
  }
}

/*Padding between each item on News archive page*/
.blog-posts {
  padding-top: 50px;
}

/*Single Post Layout*/
.single-post .inline-block:first-of-type {
  display: none;
}

.single-post .inline-block:last-of-type {
  font-size: 1.1rem;
  margin-top: 0 !important;
  text-align: right;
}