@import '../../lib/bootstrap-5.3.8/css/bootstrap.min.css';

/* Keyframes */

/* Bootstrap Overrides */

:root {

	--kt-maroon: #7C0040;
	--kt-magenta: #ff0084;

	--bs-secondary-rgb: 61,61,61;
	--bs-font-sans-serif: "Montserrat", sans-serif;
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-xxl: 0;
	--bs-border-radius-2xl: 0;
	--bs-border-radius-pill: 0;

	font-optical-sizing: auto;
	background-image: url(../images/kt-bg.svg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;

}

.btn-primary {

	--bs-btn-bg: var(--kt-maroon);
	--bs-btn-border-color: var(--kt-maroon);
	--bs-btn-hover-bg: var(--kt-magenta);
	--bs-btn-hover-border-color: var(--kt-magenta);
	--bs-btn-active-bg: var(--kt-magenta);
	--bs-btn-active-border-color: var(--kt-magenta);
	--bs-btn-disabled-bg: var(--bs-gray-500);
	--bs-btn-disabled-border-color: var(--bs-gray-500);

}

/* Bootstrap Extensions */

.links-magenta {

	a:not(.btn) {

		color: var(--kt-magenta);

		&:hover {

			color: white;

		}

	}

}

/* Custom Styles */

body {

	background-color: transparent;

}

a {

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

}

.snoeotfofdhi {

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

}

.offcanvas-menu {

	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--bs-font-sans-serif);

	.sub-menu {

		list-style: none;
		padding-left: 1rem;

	}

	a {

		display: block;
		padding: 0.5rem 0;
		color: white;
		text-decoration: none;
		border-top: 1px solid rgba(255,255,255,0.3);
		overflow: hidden;
		transition-property: all;
		transition-duration: 0.2s;
		position: relative;

	}

}

.desktop-menu {

	padding: 0;
  margin: 0;
  list-style: none;
  column-gap: 1.5rem;
  display: none;

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

    display: flex;

  }

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

		column-gap: 3rem;

	}

  a {

    text-decoration: none;

  }

  > li {

   	position: relative;

   	a {

     	padding: 1.5rem 0;
			color: var(--bs-gray-300);

			&:hover {

				color: white;

			}

   	}

   	> .sub-menu {

     	&::before {

				content: "";
				display: inline-block;
				width: 1rem;
				height: 1rem;
				background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.19629 0L10.3924 5.25H0.000136852L5.19629 0Z' fill='%23212529'/></svg>") no-repeat center/contain;
				position: absolute;
				top: -0.65rem;
				right: 50%;
				transform: translate(50%,0);

     	}

			position: absolute;
			top: calc(100% + 1.25rem);
			right: 50%;
			width: 250px;
			background-color: var(--bs-dark);
			padding: 0;
			text-align: center;
			transform: translate(50%,5rem);
			transition-duration: 0.2s;
			transition-property: all;
			opacity: 0;
			pointer-events: none;
			list-style: none;

			a {

				color: var(--bs-gray-300);
				display: block;
				padding: 0.5rem;

				&:hover {

					background-color: black;
					color: white;

				}

			}

			.sub-menu {

				display: none;

			}

   	}

   	&:hover {

     	> .sub-menu {

				transform: translate(50%,0);
				opacity: 1;
				pointer-events: all;

     	}

   	}

 	}

}

.footer-menu {

 padding: 0;
 margin: 0;
 list-style: none;

 a {

   color: white;
   text-decoration: none;

 }

 .sub-menu {

   padding-left: 1rem;
   list-style: none;

   .sub-menu {

     display: none;

   }

 }

}

.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 {

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

		margin-bottom: 1rem;

	}

	.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);

    }

		&::after {

			content: '';
			display: block;

		}

  }

  .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;

	}

}