/*
 Theme Name:   Delta Sonic
 Theme URI:    https://thebrewroom.com/
 Description:  Child Theme
 Author:       SAM INSALACO / Kim Stacy
 Author URI:   https://thebreworom.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  ds-tbr-divi-child
*/

:root {
  --clr-primary: #005e92;
  --clr-secondary: #00a5e5;
  --clr-accent: #da1b38;
  --clr-white: #ffffff;
}

.midAlign {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.et_fixed_nav #page-container .et-fixed-header#top-header {
	padding-top: 8px !important;
}

.location-hours figure {
    max-height: 20px;
}

@media screen and (min-width: 980px) {
	body.et_fixed_nav.et_secondary_nav_enabled #main-header {
    	top: 29px !important;
	}
}


/* Service Tables CSS */
.services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  transition: all 0.1s ease-in-out;
}

@media (min-width: 992px) {
  main {
    padding: 1rem;
  }

  .services {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    align-items: flex-end;
  }
}

@media (min-width: 1200px) {
  .services {
    gap: 1.5rem;
  }
}

/** Service layout */

.service-container {
  /* colors */
  --service-clr-primary: var(--clr-primary);
  --service-clr-secondary: var(--clr-secondary);
  --service-clr-accent: var(--clr-accent);
  --service-clr-gray-100: #dedede;
  --service-clr-gray-200: #efefef;
  --service-clr-gray-300: #bebebe;

  /* dimensions */
  --service-header-min-height: 56px;
  --service-width: 355px;

  /* callout gradient */
  --service-callout-gradient: linear-gradient(90deg, #007ec2 0%, #00a5e6 70%);

  /* borders radius */
  --service-border-radius: 1rem;

  position: relative;
  width: var(--service-width);
}

.service__callout {
  display: grid;
  place-items: center;
  background: var(--service-callout-gradient);
  color: #ffffff;
  border-top-left-radius: var(--service-border-radius);
  border-top-right-radius: var(--service-border-radius);
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
}

.service__callout > span {
  line-height: 1.2;
  max-width: 28ch;
  text-align: center;
}

.service__callout,
.service__header {
  min-height: var(--service-header-min-height);
}

.service__header {
  display: grid;
  place-items: center;
  background-color: var(--service-clr-primary);
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.service__header--rounded {
  border-top-left-radius: var(--service-border-radius);
  border-top-right-radius: var(--service-border-radius);
}

.service__features {
  color: var(--service-clr-accent);
  font-weight: bold;
  text-align: center;

  border: 1px solid var(--service-clr-primary);
  border-bottom-left-radius: var(--service-border-radius);
  border-bottom-right-radius: var(--service-border-radius);
}

.service__features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service__offer {
  padding: 1rem 0;
}

.service__feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: var(--service-clr-gray-100);
  font-size: 0.95rem;
  padding: 0.35rem 0;
}

.service__feature:nth-child(even) {
  background-color: var(--service-clr-gray-200);
}

.service__feature:last-of-type {
  padding-bottom: 2rem;
  border-bottom-left-radius: var(--service-border-radius);
  border-bottom-right-radius: var(--service-border-radius);
}

.service__feature--inactive {
  color: var(--service-clr-gray-300);
}

.service__tooltip {
  position: relative;
  background-image: url('../svg/info-circle.svg');
  background-size: contain;
	background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.service__tooltip::before,
.service__tooltip::after {
  --service-tooltip-scale: 0;

  position: absolute;
  top: -.15rem;
  right: 0;
  transform: translateY(-100%) scale(var(--service-tooltip-scale));
  transition: transform 75ms ease-in;
  transform-origin: bottom right;
}

.service__tooltip::before {
  content: attr(data-tooltip);
  width: max-content;
  max-width: 34ch;
  font-size: 0.8rem;
  background-color: rgba(70, 70, 70, 0.9);
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  line-height: 1.2;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.service__tooltip:hover::before,
.service__tooltip:hover::after,
.service__tooltip.active::before,
.service__tooltip.active::after {
  --service-tooltip-scale: 1;
}

.service__cta {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  background-color: var(--service-clr-accent);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.65rem 3rem;
  border-radius: 1.5rem;
}

.desktop-services--two-col {
	--service-columns: 2;
}

.desktop-services--three-col {
	--service-columns: 3;
}

.desktop-services--four-col {
	--service-columns: 4;
}

.desktop-services--five-col {
	--service-columns: 5;
}

.desktop-services--six-col {
	--service-columns: 6;
}

.desktop-services--seven-col {
	--service-columns: 7;
}

.desktop-services--equal {
	--service-label: 1fr;
}

.desktop-services {
  --service-clr-primary: var(--clr-primary);
  --service-clr-secondary: var(--clr-secondary);
  --service-clr-accent: var(--clr-accent);
  --service-clr-gray-100: #dedede;
  --service-clr-gray-200: #efefef;
  --service-clr-gray-300: #bebebe;
	
  --service-grid-columns: var(--service-columns, 4);
  --service-grid-label: var(--service-label, 1.5fr);
	
  display: none;
  flex-direction: column;
  width: 100%;
}


@media (min-width: 992px) {
  main {
    padding: 1rem;
  }

  .services {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    align-items: flex-end;
	  display: none;
  }
	
	.desktop-services {
		display: flex;
	}
}

.desktop-services-callout,
.desktop-services-header,
.desktop-services-footer {
  display: grid;
  grid-template-columns: var(--service-grid-label) repeat(calc(var(--service-grid-columns) - 1), 1fr);
}

.desktop-services-callout :first-child {
  background-color: dodgerblue;
  color: white;
  grid-column-start: 2;
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
  text-align: center;
  padding: 0.75rem 2rem;
  border-right: 1px solid white;
}

.desktop-services-header span:nth-child(2),
.desktop-services-header span:nth-child(3) {
  border-right: 1px solid white;
}

.desktop-services-header span:nth-child(2),
.desktop-services-header span:nth-child(3),
.desktop-services-header span:nth-child(4) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--service-clr-primary);
  color: white;
  text-align: center;
}

.desktop-services-header :first-child {
  border-top: 1px solid var(--service-clr-primary);
  border-left: 1px solid var(--service-clr-primary);
  border-right: 1px solid var(--service-clr-primary);
  border-top-left-radius: 1.5rem;
  font-size: 1.75rem;
  color: var(--service-clr-primary);
  font-weight: bold;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 1.25rem 0 1.25rem 2rem;
}

.desktop-services-header :last-child {
  border-top-right-radius: 1.5rem;
}

.desktop-service {
  display: grid;
  grid-template-columns: var(--service-grid-label) repeat(calc(var(--service-grid-columns) - 1), 1fr);
}

.desktop-service span {
    text-align: center;
}

.desktop-service>* {
  padding: 0.5rem 2rem;
  color: var(--service-clr-accent);
  font-weight: bold;
  border-right: 1px solid var(--service-clr-primary);
}

.desktop-service :first-child {
	  border-left: 1px solid var(--service-clr-primary);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.desktop-service :first-child > span {
	  border-left: none;
}

.desktop-service:nth-of-type(odd) {
  background-color: var(--service-clr-gray-100);
}

.desktop-service:last-of-type>* {
  border-bottom: 1px solid var(--service-clr-primary);
}

.desktop-service:last-of-type :first-child {
  border-bottom-left-radius: 1.5rem;
}

.desktop-service:last-of-type :last-child {
  border-bottom-right-radius: 1.5rem;
}

.desktop-service span:nth-of-type(2),
.desktop-service span:nth-of-type(3),
.desktop-service span:nth-of-type(4) {
  text-align: center;
  padding-inline: 2rem;
}

.desktop-service i {
  position: relative;
}

.desktop-service i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.desktop-service i.desktop-service-included::before {
  background-color: var(--service-clr-primary);
}

.desktop-service i.desktop-service-excluded::before {
	box-sizing: border-box;
  border: 3px solid var(--service-clr-gray-300);
}

.desktop-services-footer {
  margin-top: 1rem;
}

.desktop-services-footer span {
  color: var(--service-clr-primary);
  padding-left: 2rem;
}

.desktop-services-footer a {
  display: block;
  color: white;
  background-color: var(--service-clr-accent);
  border-radius: 2rem;
  text-align: center;
  padding: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 2rem;
}

/* End Tables CSS */

/* Force full width videos at top of page*/
.dsm_embed_google_map_0 iframe {
    width: 100%;
}

/* hide Divi Supreme's bullet points that are drunk
li.dsm_icon_list_child::marker {
    content: "";
}
 */

/* Remove underline on sub nav items that anchor to page elements */
li.anchor a span::after {
    height: 0px !important;
}

/* Shame file stuff */
.desktop-service:last-of-type {
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}


.desktop-services-header span:nth-child(2),
.desktop-services-header span:nth-child(3),
.desktop-services-header span:nth-child(4), 
.desktop-services-header span:nth-child(5), 
.desktop-services-header span:nth-child(6), 
.desktop-services-header span:nth-child(7) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--service-clr-primary);
  color: white;
  text-align: center;

  font-size: 22px;
  text-transform: uppercase;
  line-height: 1.1em;
  padding: 0 0.25rem;
}

.desktop-services--five-col .desktop-services-header span:nth-child(4) {
  border-right: 1px solid white;
}

.desktop-services--six-col .desktop-services-header span:nth-child(4), 
.desktop-services--six-col .desktop-services-header span:nth-child(5) {
  border-right: 1px solid white;
}

.desktop-services--seven-col .desktop-services-header span:nth-child(4),
.desktop-services--seven-col .desktop-services-header span:nth-child(5),
.desktop-services--seven-col .desktop-services-header span:nth-child(6) {
  border-right: 1px solid white;
}

.desktop-services--six-col .desktop-services-header,
.desktop-services--six-col .service-toprow,
.desktop-services--six-col .desktop-service {
  grid-template-columns: 2.75fr repeat(5, 1fr);
}

/* move the toggle icon over next to the copy on some of the toggles using class "snuggle" */
.snuggle.et_pb_toggle .et_pb_toggle_title:before {
    right: auto;
    left: 25%;
    margin-top: -9px !important;
}
/* hide the bullets on Divi Supreme Icon List modules */
ul.dsm_icon_list_items.dsm_icon_list_ltr_direction.dsm_icon_list_layout_vertical {
    list-style-type: none;
}


@media all and (max-width: 768px) {
.maps-marker-pro .mmp-list-body {
    max-height: 400px;
}
}
 /* styles for chat */
.embeddedServiceHelpButton .helpButton .uiButton {
	background-color: #90949D;
	font-family: "Helvetica Neue Font Family", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
	outline: 1px solid #90949D;
}