:root {
    --header-color: #1e4585;
    --addmision: #e92e28;
    --button: #2e7c3c;
    --circle-color: #ffd800;
    --footer-color: #4c4c4c;
    --white: #ffffff;
    --black: #000000;
    --button2: #f8f8f8;
    --red: #e92e28;
    --white: #fff;
    --black: #000000;
    --light-black: #57585a;
    --yellow: #ffd800;
    --blue: #1e4585;
    --green: #2e7c3c;
  }

.bars {
  width: 35px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.navbar .navbar-brand {
    color: var(--addmision);
    font-weight: bold;
    font-size: 24px;
    /* display: none; */
    z-index: 0;
}

.navbar {
    background-color: whitesmoke;
    padding: 0;
    transition: 0.5s all;
}

.navbar1 .header_contact ul li:not(:last-child) {
    margin-right: 25px;
}

.stick {
  width: 35px;
  height: 3px;
  margin-bottom: 7px;
  background-color: var(--button);
  display: inline-block;
}

.stick-1.open {
  animation: stick-1-open 0.6s ease-out forwards;
}
.stick-1.close {
  width: 8px;
  transform: translate(27px, 26px);
  animation: stick-1-close 0.6s ease-out forwards;
}
.stick-2.open {
  animation: stick-2-open 0.6s linear forwards;
  margin-top: 25px;
  margin-right: 15px;
}
.stick-2.close {
  transform: translate(0px, 0px) rotate(40deg);
  animation: stick-2-close 0.6s ease-out forwards;
}
.stick-2.open.close {
    margin-top: 0;
    margin-right: 0;
}
.stick:last-child {
  margin-bottom: 0;
}
.stick-3.open {
  animation: stick-3-open 0.6s linear forwards;
  margin-right: 15px;
}
.stick-3.close {
  transform: translate(0px, -23px) rotate(-40deg);
  animation: stick-3-close 0.6s ease-out forwards;
  margin-right: 0;
}

.navbar1 {
    position: absolute;
    padding: 8px 0;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 0;
}

.navbar .navbar-brand {
    color: var(--addmision);
    font-weight: bold;
    font-size: 24px;
    /* display: none; */
    z-index: 0;
}

.stick-1.open {
	animation: stick-1-open 0.6s ease-out forwards;
}

.stick-2.open {
	animation: stick-2-open 0.6s linear forwards;
	margin-top: 25px;
	margin-right: 15px;
}

.stick-3.open {
	animation: stick-3-open 0.6s linear forwards;
	margin-right: 15px;
}

.stick-1.close {
	width: 8px;
	transform: translate(27px, 26px);
	animation: stick-1-close 0.6s ease-out forwards;
}

.stick-2.close {
	transform: translate(0px, 0px) rotate(40deg);
	animation: stick-2-close 0.6s ease-out forwards;
}

.stick-3.close {
	transform: translate(0px, -23px) rotate(-40deg);
	animation: stick-3-close 0.6s ease-out forwards;
	margin-right: 0;
}

.stick-2.open.close {
	margin-top: 0;
	margin-right: 0;
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: var(--black);
    text-transform: uppercase;
}


@keyframes stick-1-open {
	0% {
		width: 35px;
	}

	40% {
		background-color: var(--addmision);
		width: 8px;
		transform: translate(40px, 0px);
	}

	75%,
	80% {
		width: 8px;
		transform: translate(40px, -50px);
		animation-timing-function: cubic-bezier(0, 1, 1, 1);
	}

	100% {
		background-color: var(--addmision);
		width: 0;
		transform: translate(35px, 46px);
	}
}

@keyframes stick-2-open {
	80% {
		background-color: var(--button);
		transform: translate(0px, 0px) rotate(0deg);
	}

	100% {
		background-color: var(--addmision);
		transform: translate(8px, -13px) rotate(40deg);
	}
}

@keyframes stick-3-open {
	80% {
		background-color: var(--button);
		transform: translate(0px, 0px) rotate(0deg);
	}

	100% {
		background-color: var(--addmision);
		transform: translate(8px, -23px) rotate(-40deg);
	}
}

@keyframes stick-1-close {
	0%,
	70% {
		width: 0;
	}

	100% {
		width: 35px;
		transform: translate(0, 0);
	}
}

@keyframes stick-2-close {
	0% {
		background-color: var(--addmision);
		width: 35px;
	}

	20% {
		background-color: var(--addmision);
		width: 8px;
		transform: translate(0px, 0px) rotate(40deg);
	}

	40% {
		background-color: var(--button);
		width: 0;
	}

	65% {
		transform: translate(0, -70px);
		animation-timing-function: cubic-bezier(0, 1, 1, 1);
	}

	80% {
		width: 0;
	}

	100% {
		width: 35px;
		transform: translate(0, 0px);
	}
}

@keyframes stick-3-close {
	0% {
		background-color: var(--addmision);
		width: 35px;
	}

	20% {
		background-color: var(--addmision);
		width: 8px;
		transform: translate(0px, -23px) rotate(-40deg);
	}

	40% {
		background-color: var(--button);
	}

	65% {
		transform: translate(0, -93px);
		animation-timing-function: cubic-bezier(0, 1, 1, 1);
	}

	90% {
		width: 8px;
	}

	100% {
		width: 35px;
		transform: translate(0, 0px);
	}
}