/* ------------------------------------------------------------------

  00. Miscellaneous
  01. Variables
  02. Forms

-------------------------------------------------------------------- */

/*--------------------------------------------------
  00. Miscellaneous
---------------------------------------------------*/

/* @font-face {
  font-family: ITCAvantGardeBold;
  src: url("../fonts/ITCAvantGardeStd-Bold.ttf")  format("truetype");
  font-weight: 700, 800, 900, bold;
}

@font-face {
  font-family: ITCAvantGardeBoldObl;
  src: url("../fonts/ITCAvantGardeStd-BoldObl.ttf")  format("truetype");
  font-weight: 700, 800, 900, bold;
} */

.content-wrapper {
  flex: 1;
}

.hero {
  text-align: center;
}

.carousel-inner img {
  height: 90%;
  height: 400px;         /* fixed height */
  object-fit: contain;     /* cover without distortion */
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 10px;
  height: 10px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--clr-light-3);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity .6s ease;
}

.carousel-indicators button{
  border-radius: 50%;
  border: none;
  opacity: 0.75;
  margin: 0 4px;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: var(--clr-dark-2);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(200deg);
}

/* standard elements */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--clr-dark-3);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
} */

header {
  background: var(--clr-dark-4-transp); 
  z-index: 1020;
}

hr {
  border-color: var(--font-darkest);
  margin-block-start: unset;
  margin-block-end: unset;
  margin-inline-start: unset;
  margin-inline-end: unset;
}

.btn {
  border-radius: 100px !important; /* make button ends semi-circular*/
  font-weight: bold;
  text-transform: uppercase;
  border: 0;
}

/*--------------------------------------------------
	01. Variables
---------------------------------------------------*/

:root {
  --preloader-image: url('../img/general/loader.svg');
}

/* 
colors
  usage: var(--clr-light-2), etc.
*/
:root {
  --shadow-size-x: -1rem;
  --shadow-size-y: 1rem;
  --corner-radius: 0.25rem;
  --clr-light-1: #f7f7f7;
  --clr-light-2: #d8d8f4;
  --clr-light-3: #98c7f2;
  --clr-light-4: #8383f2;
  --clr-dark-1: #212121;
  --clr-dark-2: #3e74ed;
  --clr-dark-3: #ea7f0a;
  --clr-dark-4: #eaa50a;
  --clr-dark-5: #8383f2;
  --clr-dark-1-transp: #212121bf;
  --clr-dark-2-transp: #3e74edbf;
  --clr-dark-3-transp: #ea7f0abf;
  --clr-dark-4-transp: #eaa50abf;
  --clr-dark-5-transp: #8383f2bf;
}

.text-light-1{
  -webkit-text-fill-color: var(--clr-light-1);
}
.text-light-2 {
  -webkit-text-fill-color: var(--clr-light-2);
}
.text-light-3 {
  -webkit-text-fill-color: var(--clr-light-3);
}
.text-light-4 {
  -webkit-text-fill-color: var(--clr-light-4);
}
.text-dark-1 {
  -webkit-text-fill-color: var(--clr-dark-1);
}
.text-dark-2 {
  -webkit-text-fill-color: var(--clr-dark-2);
}
.text-dark-3 {
  -webkit-text-fill-color: var(--clr-dark-3);
}
.text-dark-4 {
  -webkit-text-fill-color: var(--clr-dark-4);
}
.text-dark-5 {
  -webkit-text-fill-color: var(--clr-dark-5);
}

.bg-light-1 {
  background-color: var(--clr-light-1);
}
.bg-light-2 {
  background-color: var(--clr-light-2);
}
.bg-light-3 {
  background-color: var(--clr-light-3);
}
.bg-light-4 {
  background-color: var(--clr-light-4);
}
.bg-dark-1 {
  background-color: var(--clr-dark-1);
}
.bg-dark-2 {
  background-color: var(--clr-dark-2);
}
.bg-dark-3 {
  background-color: var(--clr-dark-3);
}
.bg-dark-4 {
  background-color: var(--clr-dark-4);
}
.bg-dark-5 {
  background-color: var(--clr-dark-5);
}

.sharp-light-shadow-1 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-light-1);
  border-radius: var(--corner-radius);
}
.sharp-light-shadow-2 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-light-2);
  border-radius: var(--corner-radius);
}
.sharp-light-shadow-3 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-light-3);
  border-radius: var(--corner-radius);
}
.sharp-light-shadow-4 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-light-4);
  border-radius: var(--corner-radius);
}
.sharp-dark-shadow-1 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-dark-1);
  border-radius: var(--corner-radius);
}
.sharp-dark-shadow-2 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-dark-2);
  border-radius: var(--corner-radius);
}
.sharp-dark-shadow-3 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-dark-3);
  border-radius: var(--corner-radius);
}
.sharp-dark-shadow-4 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-dark-4);
  border-radius: var(--corner-radius);
}
.sharp-dark-shadow-5 {
  box-shadow: var(--shadow-size-x) var(--shadow-size-y) 0px 0px var(--clr-dark-5);
  border-radius: var(--corner-radius);
}


/* :root {
  --font-primary: "RobotoLight", sans-serif;
  --font-secondary: "ITCAvantGardeBold", sans-serif;
} */



/*--------------------------------------------------
	02. Forms
---------------------------------------------------*/


form label,
form p {
  /* font-size: var(--text-sm); */
  line-height: 1;
  color: var(--clr-dark-2);
  -webkit-text-fill-color: var(--clr-dark-2);
}

form input[type="text"],
form input[type="search"],
form textarea,
form input[type="email"] {
  border: 0;
  background: var(--clr-dark-5);
  color: var(--clr-light-1);
  -webkit-text-fill-color: var(--clr-light-1);
  border-radius: var(--corner-radius);
  /* font-size: var(--text-base); */
  /* font-family: 'RobotoMonoRegular'; */
  /* line-height: 1.5;
  font-weight: 500;
  width: 100%;
  padding: 14px 0;
  background-color: transparent;
  border-bottom: 1px solid var(--font-darkest); */
  /* transition: border 0.4s cubic-bezier(0.77, 0, 0.175, 1); */
  /* text-transform: lowercase; */
} 

@media (max-width: 767px) {
  /* form input[type="text"],
  form input[type="search"],
  form textarea,
  form input[type="email"] {
    font-size: var(--text-lg);
  } */
}

.form-select {
  border: 0;
  background-color: var(--clr-light-2);
  color: var(--clr-light-4);
  -webkit-text-fill-color: var(--clr-light-4);
  font-weight: bold;
  border-radius: var(--corner-radius);
  /* change color of down arrow to white*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
}

form input[type="text"]:focus,
form input[type="search"]:focus,
form textarea:focus,
form input[type="email"]:focus {
  outline: none;
  background: white;
  /* border-bottom: 1px solid var(--clr-dark-5); */
  color: var(--clr-dark-3);
  -webkit-text-fill-color: var(--clr-dark-3);
  border-color: var(--clr-light-2) !important;
}

/* mce-error-response and mce-success-response are Mailchimp classes for form response messages */
#mce-error-response {
  font-weight: bold;
  color: var(--clr-dark-3) !important;
  -webkit-text-fill-color: var(--clr-dark-3) !important;
}
#mce-success-response {
  font-weight: bold;
  color: var(--clr-dark-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
}

/* placeholder text color */
form ::-webkit-input-placeholder {
  color: var(--clr-light-2);
  -webkit-text-fill-color: var(--clr-light-2);
  /* font-weight: 200; */
}

form ::-moz-placeholder {
  color: var(--clr-light-2);
  -webkit-text-fill-color: var(--clr-light-2);
  /* font-weight: 200; */
}

form ::-ms-input-placeholder {
  color: var(--clr-light-2);
  -webkit-text-fill-color: var(--clr-light-2);
  /* font-weight: 200; */
}

form ::-ms-input-placeholder {
  color: var(--clr-light-2);
  -webkit-text-fill-color: var(--clr-light-2);
}

form ::placeholder {
  color: var(--clr-light-2);
  -webkit-text-fill-color: var(--clr-light-2);
  /* font-weight: 200; */
}


/* FAILED attempt to re-color autofill class. Seems to do nothing in Chrome. */
input:-autofill {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-light-2) !important;
  background-color: var(--clr-light-1) !important;
}

input:-autofill-selected {
  color: var(--clr-dark-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
  background-color: var(--clr-dark-5) !important;
}

form ::-webkit-input-autofill {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-light-2) !important;
  background-color: var(--clr-light-1) !important;
  font-weight: bold !important;
}

form ::-moz-autofill {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-light-2) !important;
  background-color: var(--clr-light-1) !important;
  font-weight: bold !important;
}

form ::-ms-input-autofill {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-light-2) !important;
  background-color: var(--clr-light-1) !important;
  font-weight: bold !important;
}

form ::-ms-input-autofill {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-light-2) !important;
  background-color: var(--clr-light-1) !important;
  font-weight: bold !important;
}

form ::autofill {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-light-2) !important;
  background-color: var(--clr-light-1) !important;
  font-weight: bold !important;
}

form ::-webkit-input-autofill-selected {
  color: var(--clr-light-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
  background-color: var(--clr-dark-5) !important;
  font-weight: bold !important;
}

form ::-moz-autofill-selected {
  color: var(--clr-dark-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
  background-color: var(--clr-dark-5) !important;
  font-weight: bold !important;
}

form ::-ms-input-autofill-selected {
  color: var(--clr-dark-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
  background-color: var(--clr-dark-5) !important;
  font-weight: bold !important;
}

form ::-ms-input-autofill-selected {
  color: var(--clr-dark-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
  background-color: var(--clr-dark-5) !important;
  font-weight: bold !important;
}

form ::autofill.selected {
  color: var(--clr-dark-2) !important;
  -webkit-text-fill-color: var(--clr-dark-2) !important;
  background-color: var(--clr-dark-5) !important;
  font-weight: bold !important;
}