body {
    text-align: center;
}
div{
    padding-right: 10px;
    padding-left: 10px;
}
.login .login-4 .login-form {
    width: 100%;
    max-width: 450px; 
}
@media (max-width: 575.98px) {
    .login.login-4 .login-form {
        width: 100%;
        max-width: 100%; 
    } 
}
h1{
    color: #000000; 
    font-family: 'Josefin Sans', sans-serif; 
    font-size: 25px; 
    font-weight: 700; 
    letter-spacing: -2px;
}
h3{
    color: #000000; 
    font-family: 'Josefin Sans', sans-serif; 
    font-size: 20px; 
    font-weight: 700; 
    letter-spacing: -2px;
}
.content{
    color: #000000; 
    font-family: 'Josefin Sans', sans-serif; 
    font-size: 17px;
    font-weight: 300; 
}

.integration_class{
            color: #000 !important;
            text-decoration: none !important;
            font-weight: 400;
            margin-top: 3rem !important;
            letter-spacing: -1px;
        }
.marquee__container {
  background: #000;
  margin-top: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: translateZ(0);
}
.marquee__text {
  color: #fff;
  height: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.6rem;
  letter-spacing: -1px;
  text-align: center;
  font-size: 2.3rem;
  font-weight: 600;
  white-space: nowrap;
  width: auto;
  perspective: 900;
  margin: 13px 0 0.15em;
  -webkit-animation: marquee-left 6.6s linear infinite forwards;
  animation: marquee-left 6.6s linear infinite forwards;
}
.marquee__text{
    font-family: 'Josefin Sans';
}
@media only screen and (min-width: 769px) {
  .marquee__text {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
  }
  .marquee__text span {
    padding: 0 15px;

  }
}

@media only screen and (max-width: 500px) {
    .marquee__text {
    font-size: 1.3rem;
    padding-bottom: 0.4rem;
    height: 1rem;
    line-height: 0.6rem;
  }
}
.marquee__text span {
  padding: 0 20px;
}
@keyframes marquee-left {
  0% {
    transform: translateX(-1%);
  }
  to {
    transform: translateX(-51%);
  }
}
@keyframes marquee-right {
  0% {
    transform: translateX(-51%);
  }
  to {
    transform: translateX(-1%);
  }
}
@keyframes change {
  50% {
    opacity: 1;
    transform: translateY(-200px);
  }
  to {
    transform: translateY(-210px);
    opacity: 1;
  }
}
@keyframes downdown {
  50% {
    opacity: 1;
    transform: translateY(-200px);
  }
  to {
    transform: translateY(-200px);
    opacity: 1;
  }
}
@keyframes upup {
  50% {
    transform: translateY(-220px);
  }
  to {
    transform: translateY(-220px);
  }
}