#logo-red {
    color: #e01924;
}

#logo-blue {
    color: #444444;
}


video.fullscreen {
  position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link{
  width: 70%;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background-color: #f3f3f3;
}

$animationSpeed: 40s;

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 7))}
}

.slider {
  display: flex;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 2.5rem;
}

.slider-track {
  display: flex;
  width: calc(200px * 100); /* Width of all 100 images */
}

.item {
  display: flex;
  animation: animate 180s linear infinite;
  width: calc(200px * 100); /* Width of all 100 images */
}

.item img {
  min-width: 200px;
  padding: 0 30px;
  height: auto;
  object-fit: cover;
}

@keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 100)); /* Move by full width of 100 images */
  }
}


#navmenu-nav1 li.account-menu.active .navbar-link, #navmenu-nav li.account-menu:hover .navbar-link{
  background-color: #f3f3f3;
}

/* Floating Buttons */
#presentation:hover{
  box-shadow: 0 12px 28px -5px rgba(0,0,0,0.13);
  transition: all 0.3s;
  transform: translateZ(10px);
}

#floating-button{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #e01924;
  position: fixed;
  bottom: 30px;
  left: 30px;
  cursor: pointer;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

.plus{
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}

#container-floating{
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  left: 30px;
  z-index: 50px;
}

#container-floating:hover{
  height: 400px;
  width: 90px;
  padding: 30px;
}

#container-floating:hover .plus{
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.edit{
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}

#container-floating:hover .edit{
  animation: edit-in 0.2s;
   animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in{
    from {opacity: 0; transform: rotateZ(-70deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

@keyframes edit-out{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(-70deg);}
}

@keyframes plus-in{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(180deg);}
}

@keyframes plus-out{
    from {opacity: 0; transform: rotateZ(180deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

.nds{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform:  scale(0);
  cursor: pointer;
}

.nd1{
  background: #444444;
  left: 40px;
  bottom: 120px;
  animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
  animation-fill-mode:  forwards;
}

.nd3{
  background: #444444;
  left: 40px;
  bottom: 180px;
  animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
  animation-fill-mode:  forwards;
}

.nd4{
  background: #444444;
  left: 40px;
  bottom: 240px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

@keyframes bounce-nds{
    from {opacity: 0;}
    to {opacity: 1; transform: scale(1);}
}

@keyframes bounce-out-nds{
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(0);}
}

#container-floating:hover .nds{

  animation: bounce-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

#container-floating:hover .nd3{
  animation-delay: 0.08s;
}
#container-floating:hover .nd4{
  animation-delay: 0.15s;
}
#container-floating:hover .nd5{
  animation-delay: 0.2s;
}

.letter{
  font-size: 23px;
  font-family: 'Roboto';
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  line-height: 40px;
}

.reminder{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.profile{
  border-radius: 50%;
  width: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 20px;
}


.bg-primary {
    background-color: #444444!important;
}

.text-primary {
    color: #e01924!important;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #000000;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #e01924;
    --bs-btn-border-color: #444444;
    --bs-btn-hover-border-color:#e01924;
    }

    .footer {
    background: #444444;
  }

/* Add here all your CSS customizations */

/* Floating Buttons */