/* Mixins */

/* Keyframes */

@keyframes spin {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}

/* FontAwesome Overrides */

/* Bootstrap Overrides */

:root {

	--mdw-off-white: #EEEDE8;
	--mdw-off-white-rgb: 238,237,232;
	--mdw-orange: #AD572D;
	--mdw-orange-rgb: 173,87,45;
	--mdw-dark-green: #004741;
	--mdw-darker-green: #003E39;
	--mdw-dark-green-rgb: 0,71,65;
	--mdw-yellow: #EAB33E;

	--bs-font-sans-serif: "montserrat", sans-serif;
	--bs-body-bg: var(--mdw-dark-green);
	--bs-body-bg-rgb: var(--mdw-dark-green-rgb);
	--bs-link-color: var(--mdw-dark-green);
	--bs-link-hover-color: var(--mdw-orange);
	--bs-link-color-rgb: var(--mdw-dark-green-rgb);
	--bs-link-hover-color-rgb: var(--mdw-orange-rgb);
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-heading-color: var(--mdw-dark-green);

	--wc-form-border-radius: var(--bs-border-radius);
	--wc-form-border-color: var(--bs-border-color);

}

.btn-primary {

	--bs-btn-bg: var(--mdw-orange);
	--bs-btn-border-color: var(--mdw-orange);
	--bs-btn-hover-bg: var(--mdw-yellow);
	--bs-btn-hover-border-color: var(--mdw-yellow);
	--bs-btn-hover-color: black;
	--bs-btn-active-bg: var(--mdw-yellow);
	--bs-btn-active-border-color: var(--mdw-yellow);
	--bs-btn-disabled-bg: var(--bs-dark);
	--bs-btn-disabled-border-color: var(--bs-dark);

	&[aria-current="page"] {

		background-color: var(--mdw-yellow);
		border-color: var(--mdw-yellow);
		color: black;

	}

}

.btn-secondary {

	--bs-btn-bg: var(--mdw-dark-green);
	--bs-btn-border-color: var(--mdw-dark-green);
	--bs-btn-hover-bg: var(--mdw-yellow);
	--bs-btn-hover-border-color: var(--mdw-yellow);
	--bs-btn-hover-color: black;

}

.form-control,
.form-select {

	--bs-body-bg: white;

}

.form-floating {

	&>.form-control-plaintext,
	&>.form-control:focus,
	&>.form-control:not(:placeholder-shown),
	&>.form-select {

		&~label,
		&~label::after {

			background-color: transparent;

		}

	}

}

.form-check-input {

	--bs-form-check-bg: white;

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

	margin-bottom: 1rem;
	font-family: "freight-neo-pro", sans-serif;
	font-weight: 400;

}

.accordion {

	--bs-accordion-bg: transparent;
	--bs-accordion-active-bg: var(--bs-light);
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-active-color: black;

}

.table {

	--bs-table-bg: transparent;

}

.modal {

  --bs-modal-bg: white;
  --bs-modal-border-radius: 0;

}

/* Bootstrap Extensions */

.alert-error {

  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);

}

.bg-off-white-particles {

	background-color: var(--mdw-off-white);
	background-image: url("../images/particle-bg.png");
	background-attachment: fixed;

}

.bg-dark-green {

	background-color: var(--mdw-dark-green);

}

.text-dark-green {

	color: var(--mdw-dark-green);

}

.links-text-decoration-none {

	a {

		text-decoration: none;

	}

}

.links-light {

	a:not(.btn) {

		color: var(--bs-light);

		&:hover {

			color: var(--mdw-orange);

		}

	}

}

.btn-icon {

	background-color: #D9D9D9;
	color: #444444;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	&:hover {

		background-color: #444444;
		color: #D9D9D9;

	}

}

/* WooCommerce Overrides */

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {

	font-weight: normal;
	color: white;
	background-color: var(--mdw-orange);
	border-radius: 0;
	transition-property: color, background-color;
	transition-duration: 0.2s;

}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover {

	background-color: var(--mdw-yellow);
	color: black;

}

.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {

	border-radius: 0;

}

.woocommerce td.product-name .wc-item-meta {

  padding: 0;

}

/* Custom Styles */

a {

	transition-duration: 0.2s;
	transition-property: color;

}

.mobile-menu {

	list-style: none;
	padding: 0;
	margin: 0;
	font-weight: 300;

	.sub-menu {

		list-style: none;
		padding: 0 0 0 1.5rem;

		a {

			padding-left: 1.5rem;

		}

    .sub-menu {

      a {

        padding-left: 3rem;

      }

    }

	}

	a {

		display: block;
		padding: 0.5rem 0.75rem;
		color: white;
		text-decoration: none;
		border-top: 1px solid var(--bs-gray-700);
		overflow: hidden;
		transition-property: all;
		transition-duration: 0.2s;
		position: relative;

	}

	.menu-item-has-children {

		> .sub-menu {

			> li {

				> a {

					height: 0;
					padding: 0;
					border-top: none;

				}

			}

		}

		&.active {

			> a {

				&::after {

					transform: rotate(180deg);

				}

			}

			> .sub-menu {

				> li {

					> a {

						height: auto;
						padding-top: 0.5rem;
						padding-bottom: 0.5rem;
						border-top: 1px solid var(--bs-gray-700);

					}

				}

			}

		}

		> a {

			&::after {

				display: inline-block;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				font: var(--fa-font-light);
  			content: '\f107';
				position: absolute;
				right: 0;
				transition-property: transform;
				transition-duration: 0.2s;

			}

		}

	}

}

.desktop-menu {

	display: none;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	list-style: none;

	a {

		text-decoration: none;
		line-height: 1.2;
		transition-property: all;
		transition-duration: 0.2s;

	}

	li {

		position: relative;

	}

	.sub-menu {

		padding: 0;
    width: 250px;
    background-color: var(--bs-dark);
    list-style: none;
    text-align: left;
		transition-property: all;
		transition-duration: 0.2s;
		border-radius: var(--bs-border-radius);
		overflow: hidden;

		a {

			display: block;
			padding: 0.5rem;
			color: var(--bs-light);
			border-top: 1px solid var(--bs-gray-700);

			&:hover {

				background-color: black;

			}

		}

		.sub-menu {

			a {

				padding-left: 1rem;
				padding-right: 1rem;

			}

		}

	}

	> li {

		> a {

			display: flex;
			align-items: center;
			padding: 1rem 0.25rem;

		}

		> .sub-menu {

			position: absolute;
			top: 500%;
			opacity: 0;
			pointer-events: none;
			left: 50%;
			transform: translateX(-50%);

			.sub-menu {

				> li {

					> a {

						height: 0;
						padding-top: 0;
						padding-bottom: 0;
						border-top: none;

					}

				}

			}

			.menu-item-has-children {

				&.active {

					.sub-menu {

						> li {

							> a {

								height: auto;
								padding-top: 0.5rem;
								padding-bottom: 0.5rem;
								border-top: 1px solid var(--bs-gray-700);

							}

						}

					}

				}

			}

		}

		&:hover {

			> .sub-menu {

				top: 100%;
				opacity: 1;
				pointer-events: all;

			}

		}

	}

	.menu-item-has-children {

		&.active {

			> a {

				&::after {

					transform: rotate(180deg);

				}

			}

		}

		> a {

			padding-right: 1.5rem;

			&::after {

				display: inline-block;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				font: var(--fa-font-light);
  			content: '\f107';
				position: absolute;
				right: 0.5rem;
				transition-property: transform;
				transition-duration: 0.2s;

			}

		}

	}

	@media screen and (min-width: 1200px) {

		display: flex;

	}

}

.awaken {

  opacity: 0;
  transform: translateY(5rem);
  transition-property: all;
  transition-duration: 1s;

  &.fade {

    transform: none;
    transition-duration: 0.5s;

  }

  &.in-viewport {

    opacity: 1;
    transform: translateY(0);

  }

}

.wysiwyg-content {

	.wp-caption {

		max-width: 100%;

	}

  img {

    max-width: 100%;
    height: auto;
		box-shadow: var(--scdt-yellow) 10px 10px;
		border-radius: var(--bs-border-radius-xl);

  }

  iframe {

    max-width: 100%;

  }

  .alignleft,
  .alignright {

    max-width: 100%;
		margin-bottom: 1.5rem;
    display: block;

    @media screen and (min-width: 576px) {

      display: inline;
      max-width: calc(50% - 1.5rem);

    }

  }

  .alignleft {

    @media screen and (min-width: 576px) {

      float: left;
      margin: 0 1.5rem 1.5rem 0;

    }

  }

  .alignright {

    @media screen and (min-width: 576px) {

      float: right;
      margin: 0 0 1.5rem 1.5rem;

    }

  }

  .aligncenter {

    margin: auto;
    display: block;

  }

	.alignnone {

		display: block;
		margin-bottom: 1.5rem;

	}

}

.sojo840kso {

	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	z-index: -1;

}

.breadcrumbs {

	ol {

		> i, li {

			display: none;

			&:first-of-type {

				display: block;

			}

			@media screen and (min-width: 576px) {

				display: block;

			}

		}

		> li {

			&:nth-of-type(2) {

				display: block;

			}

		}

	}

}

section {

	&.banner_carousel {

		.overlay {

			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			color: white;
			background-color: var(--mdw-darker-green);

			@media screen and (min-width: 768px) {

				position: absolute;
				background: transparent;
				background: linear-gradient(47deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);

			}

		}

	}

}

#mdw-product-grid {

	aside {

		@media screen and (max-width: 991px) {

			position: fixed;
			width: 100%;
			height: 100vh;
			left: 0;
			top: 100%;
			background-color: white;
			z-index: 2;
			padding: 1.5rem;
			margin-top: 0;
			transition-property: top;
			transition-duration: 0.2s;
			overflow: auto;

		}

		&.active {

			top: 0;

		}

		.summary {

			position: relative;

			&.updating {

				pointer-events: none;
				opacity: 0.5;

				&::after {

					font: var(--fa-font-solid);
					content: '\f110';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 2rem;
					color: black;
					animation-duration: 1s;
					animation-name: spin;
					animation-timing-function: linear;
					animation-iteration-count: infinite;
					opacity: 1;

				}

			}

		}

		th {

			font-weight: normal;

		}

	}

}