html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
}
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.box .row {
  border: 1px solid #7289DA;
  border-left:none;
  border-right: none;
}
.row-header {
  z-index: 999;
  position: sticky;
  top:0;
  text-align:center;
  display:block;
  width:100%;
  background-color: #36393e;
}
.header-text{
  font-family: 'Grenze';
  font-size: 30px;
  display:inline-block;
  color:white;
}
.h-text{
  margin: 5px;
}
.header-img{
  vertical-align:middle;
  display:inline-block;
}
.tfe-img{
  display:inline-block;
  height: 30px;
}
.row-content {
  flex: 1 1 auto;
  background-color: #36393e;

}
.box .background-img{
  width: 100%;

}
.box .row.footer {
  flex: 0 1 40px;
  background-color: #36393e;
}
.box-container {
  display: cover;

}
.discord-logo{
  height: 30px;
  display: inline-block;
  text-align: left;
  vertical-align:bottom;
}
.ts-logo{
  height: 30px;
  display: inline-block;
  text-align: left;
  vertical-align: bottom;
}
.unit-logo-nswdg-text{
  float: left;
  display: none;
}
.unit-logo1-nswdg:hover div.unit-logo-nswdg-text{
  display: block;
}

.unit-logo1, .unit-logo2, .unit-logo3, .unit-logo4, .unit-logo5, .unit-logo6{
  max-height: 100px;
  text-align: center;
  margin: auto;
}
.units{
  margin-top:5px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: 25px;
  color: #FFFFFF;

}
.discord-text{
  text-decoration: none;
  font-size: 25px;
  color: #FFFFFF;
}
.ts-text{

  text-decoration: none;
  font-size: 25px;
  color: #FFFFFF;
}
.unit-images{
  margin-bottom: 5px;
  text-align: center;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
}

.social-links{
  display: grid;
  grid-template-colums: auto auto;

}
.social-discord{
  display: block;
  text-align: center;
}
.ds{
  display: inline-block;

}
.social-ts{
  display: block;
  text-align: center;

}

#slider{
  overflow: hidden;
}
#slider figure{
  position: relative;
  width: 500%;
  margin: 0;
  animation: 20s slider infinite;
}

#slider figure img{
  float: left;
  width: 20%;
}

@keyframes slider{
  0%{left:0;}
  20%{left:0;}
  25%{left:-100%;}
  45%{left:-100%;}
  50%{left:-200%;}
  70%{left:-200%;}
  75%{left:-300%;}
  95%{left:-300%}
  100%{left:-400%;}
}

.scroll-down {
z-index: 998;
height: 40px;
width: 20px;
border: 2px solid white;
position: absolute;
right: 0.5%;
bottom: 65%;
border-radius: 50px;
cursor: pointer;
}
.scroll-down::before,
.scroll-down::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 10px;
width: 10px;
transform: translate(-50%, -100%) rotate(45deg);
border: 2px solid white;
border-top: transparent;
border-left: transparent;
animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
top: 30%;
animation-delay: 0.3s;
/* animation: scroll-down 1s ease-in-out infinite; */
}

@keyframes scroll-down {
0% {
/* top:20%; */
opacity: 0;
}
30% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
top: 90%;
opacity: 0;
}
}