body.login .login-image {
  margin-left: 40px !important;
  z-index: 3;
  position: absolute;
  width: 250px;
  margin-top: 8px !important;
}
body.login {
  background: #f0f0f0 !important;
}
#login-panel {
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 20px;
  padding-top: 90px;
  border-right: 1px solid rgb(191, 191, 191);
  height: 100vh;
  /* background-color: rgb(229, 229, 229); */
  background-color: rgb(29, 72, 168);
  box-shadow: 2px 0px 3px rgba(88, 88, 88, 0.35);
}

#login-panel .panel {
  width: 300px;
}

#login-panel .panel-heading {
  padding: 1px;
  padding-left: 10px;
}

#news-container .panel-body {
  height: calc(100vh - 580px) !important;
}

#login_carousel img.carousel-image {
  z-index: -2;
  transform: scale(1.1, 1.1);
  position: fixed;
  top: 0px;
}

/* For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

    0%
    a/t*100%
    (a+b)/t*100% = 1/n*100%
    100%-(b/t*100%)
    100%

a = 10
b = 4
t = 14 * 6 = 84

0%
11%
16%
95%
100%
    */

#login_carousel {
  width: calc(100vw - 344px);
  position: absolute;
  left: 341px;
  height: 100vh;
  display: flex;
  align-items: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  z-index: -4;
  padding: 160px;
}
#login_carousel img.carousel-image {
    animation-name: loginImagesAnimation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 32s;
    animation-direction: initial;
    position: fixed;
    top: 120px;
    width: 52vw;
    min-width: 400px;
    opacity: 0;
}

body.login {
    overflow-y: hidden;
}

@keyframes loginImagesAnimation {
  0% {
    transform: translate(0, 0) scale(1.1, 1.1);
    opacity: 1;
  }
  11% {
    opacity: 1;
    transform: translate(-2px, 0) scale(1.08, 1.08);
  }
  16% {
    opacity: 0;
  }
  20% {
    transform: translateX(50px);
  }
  50% {
    transform: translate(40px, 0) scale(1.04, 1.04);
  }
  70% {
    transform: translate(19px, 20px) scale(1.06, 1.06);
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) scale(1.1, 1.1);
  }
}

#login_carousel img:nth-of-type(1) {
  animation-delay: 20s;
}
#login_carousel img:nth-of-type(2) {
  animation-delay: 16s;
}
#login_carousel img:nth-of-type(3) {
  animation-delay: 12s;
}
#login_carousel img:nth-of-type(4) {
  animation-delay: 8s;
}
#login_carousel img:nth-of-type(5) {
  animation-delay: 4s;
}
#login_carousel img:nth-of-type(6) {
  animation-delay: 0s;
}
body.login #footer {
  background: transparent;
  color: white;
  filter: opacity(1);
  min-height: 40px;
  margin-top: calc(100vh - 40px);
  position: absolute;
  padding-top: 15px;
  z-index: 100;
  width: 300px;
  text-align: center;
}
body.login #footer a {
  color: #afc5d8 !important;
}
body.login #footer hr {
    display: none;
}

body.login .panel, body.login .panel-heading, body.login .panel-footer {
  background-color: rgb(29, 72, 168) !important;
  border: 0px !important;
  box-shadow: unset !important;
  color: white;
}

body.login .panel.panel-default.panel.semi-transparent .panel-heading {
  background-color: rgb(29, 72, 168) !important;
}

body.login #footer,
body.login #news-container .footer,
body.login #news-container .footer a {
  background-color: rgb(29, 72, 168) !important;
  color: white;
}
body.login a {
  color: #ffa03c !important;
}