:root {
  --mainspring-blue: #106c9a;
  --mainspring-white: #fff;
  --mainspring-dark-green: #0d260d;
  --mainspring-off-white: #f9f7e8;
  --click-state-gray: #464646;
  --mainspring-black: #131313;
  --mainspring-red: #7c1719;
  --mainspring-gold: #c77a35;
  --mainspring-green: #35672b;
  --mainspring-brown: #593e21;
  --lighter-off-white: #fffef9;
  --transparent: #000;
}

body {
  color: #333;
  font-family: franklin-gothic-atf, sans-serif;
  font-size: 14px;
  line-height: 20px;
  background-color: #022a08;
	margin:0;
	padding:0;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

a {
  color: var(--mainspring-blue);
  font-weight: 900;
  text-decoration: none;
}

.animation-section {
  background-image: url('../images/Mainspring_VITAL_Background_1Mainspring_VITAL_Background.jpg');
  background-position: 50%;
  background-size: auto;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.image-9 {
  max-width: none;
  height: 14vw;
  position: absolute;
  inset: 0% auto auto 0%;
}

.mask-div {
  background-color: #022a08;
  justify-content: center;
  align-items: center;
  width: 93%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.vital-container {
  width: 75vw;
  height: 14vw;
  position: relative;
}

.vital-group-1 {
  z-index: 1;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.letter-divs {
  opacity: 0;
  height: 100%;
  display: inline-block;
}

.letter-images {
  height: 100%;
}

.vital-group-2 {
  z-index: 2;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vital-group-3 {
  z-index: 3;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vital-group-4 {
  z-index: 4;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vital-group-5 {
  z-index: 5;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vital-group-7 {
  z-index: 7;
  opacity: 0;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.slide-6-mask-copy {
  z-index: 2;
  height: 100%;
  position: absolute;
}

.vital-text-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 5vw;
  display: flex;
}

.vital-headings {
  opacity: 0;
  color: #f9f7e8;
  margin-top: 0;
  margin-bottom: 0;
  font-family: rockwell, sans-serif;
  font-size: 4.7vw;
  font-weight: 300;
  line-height: 100%;
  position: absolute;
}

.vital-group-6 {
  z-index: 6;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

@media screen and (max-width: 767px) {
	body.mainspring-animation {
		min-height:inherit!important;
	}
  .animation-section {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .image-9 {
    height: 14vw;
  }

  .vital-headings {
    font-size: 24px;
  }
}

@media screen and (max-width: 479px) {
  .image-9 {
    height: 15vw;
  }

  .vital-headings {
    font-size: 18px;
  }
}