/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 16 2025 | 21:36:21 */
/* Remove double arrow from Form Select fields */
.uael-gf-select-custom:after{
	display:none;
}
.gfield_list_icons button.add_list_item, .gfield_list_icons button.delete_list_item{
	font-size: 0!important;
	padding: 0!important;
}

/*------------------------NAV-------------------------*/
.custom-nav{
	display: flex;
    flex-direction: row;
    container-widget-height: 100%;
    container-widget-flex-grow: 1;
    container-widget-align-self: stretch;
    flex-wrap-mobile: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0px 0px;
    row-gap: 0px;
    column-gap: 0px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 64px;
    padding-right: 64px;
}
/*-------------------END NAV---------------------------*/

.gallery-container img{
	object-fit:cover;
	height:250px;
}

.f-footer ul{
	padding-left:0px;
	list-style-type:none;
}

.f-footer a{
	color:#000;
	transition: ease-in-out 0.3s;
}

.f-footer a:hover{
	opacity:0.5;
}

.d-none{
	display:none;
}

.f-page-title{
	display:block;
	opacity:1;
	visibility:visible;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu{
	top:80px;
}

.shop-item a{
	color:#000!important;
}

@media (min-width: 993px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu{
		box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.25);
	}
}

@media (min-width: 993px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu{
		top:16px;
		box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.25);
	}
}

.menu-item i._mi{
	margin-top:-15px;
	vertical-align:sub;
}

@media (min-width:993px){
	.mm-spacer{
	height:38px;
	}
}

@media (max-width:768px){
	.mega-block-title{
		padding-top:32px!important;
	}
}

@media (max-width:768px){
	.mega-sub-menu{
		padding-bottom:32px!important;
	}
}

.location .uael-dual-button:hover svg{
	fill:#000;
}

#zo-skin {
  position: relative;
  display: block;
  overflow: hidden;
}

#zo-skin::after {
  content: "We stock all ZO® Products. For more information about our products visit zoskinhealth.ca →";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
  pointer-events: none;
}

#zo-skin:hover::after {
  opacity: 1;
}

.multi-button-socials .uael-dual-button svg{
	transition: all 0.2s;
}

.multi-button-socials .uael-dual-button:hover svg{
	fill:#fff!important;
}

.mm-pad{
	padding-left: 20px!important;
	padding-right: 20px!important;
}