body {
   background: black;
   font-family: 'Bebas Neue', cursive;
}

.layer {
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
}

#social-media-spinner {
  width: 213px;
  height: 45px;
  background: url('/application/files/6516/5212/9454/social-media-button-nonactive.png');
}

.carousel-indicators [data-bs-target] {
   position: relative;
   background-repeat: no-repeat !important;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   margin-right: 6px;
   text-indent: 0;
   color: white;
   background: black;
   font-size: 1em;
   line-height: 55px;
   background: url('/application/files/7616/5057/4248/Slider-control-non-active-55px.png');
   
 }

 .carousel-indicators [data-bs-target].active {
   background: url('/application/files/1016/5057/4249/Slider-control-active-55px.png');
 }

 .carousel-indicators div {
   color: transparent;
 }

 .carousel-indicators .active + div {
   display: flex;
   color: white;
 }

 .carousel-indicators [data-bs-target]:hover {
    opacity: .9;
 }

 .carousel-indicators [data-bs-target]:hover + div {
   color: white;
 }

 @keyframes popIn {
    0% { opacity:0;
    transform: translateY(100%);}
    100% { opacity:1;
      transform: translateY(0%);}
 }



 @keyframes slideLeft {
  0% { opacity:0;
  transform: translateX(25%);}
  100% { opacity:1;
    transform: translateX(0%);}
}

@keyframes slideRight {
  0% { opacity:0;
  transform: translateX(-25%);}
  100% { opacity:1;
    transform: translateX(0%);}
}

 #right-slide-menu {
   right: -185%;
   width: 200%;
   opacity: 0;
   z-index: 0;
 }

 #left-slide-menu {
  left: -185%;
  width: 200%;
  opacity: 0;
  z-index: 0;
}

.left-slide {
  animation: slideLeft cubic-bezier(0.39, 0.575, 0.565, 1) 750ms forwards ;
}

.right-slide {
  animation: slideRight cubic-bezier(0.39, 0.575, 0.565, 1) 750ms forwards ;
}

.right-slide-reverse {
  animation: slideRight cubic-bezier(0.39, 0.575, 0.565, 1) 750ms reverse ;
}



 ul.sub-menu li {
   background-color: black;
   padding: 12px;
   margin-top: 12px;
   color: #B0B0B0;
   font-size: 14px;
   border-radius: 4px;
   clip-path: polygon(0 0, 100% 0, 100% 85%, 93% 100%, 0 100%);
   opacity: 0;
 }

 ul.sub-menu li:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  z-index:40;
 }

 ul.sub-menu li div:first-child {
   color: white;
   font-size: 18px;
 }

 ul.sub-menu.gray-variant li {
   background-color: #4D4D4D;
   color: #EFEFEF;
 }

 ul.sub-menu.gray-variant li div:first-child {
  color: #c9c9c9;
  font-size: 18px;
}



 div.carousel-item.active  ul.sub-menu li {
   animation: popIn cubic-bezier(0.39, 0.575, 0.565, 1) 750ms forwards ;
 }

 div.carousel-item.active ul.sub-menu li:nth-child(1) { animation-delay: 100ms; }
 div.carousel-item.active ul.sub-menu li:nth-child(2) { animation-delay: 200ms; }
 div.carousel-item.active ul.sub-menu li:nth-child(3) { animation-delay: 300ms; }
 div.carousel-item.active ul.sub-menu li:nth-child(4) { animation-delay: 400ms; }
 div.carousel-item.active ul.sub-menu li:nth-child(5) { animation-delay: 500ms; }
 div.carousel-item.active ul.sub-menu li:nth-child(6) { animation-delay: 600ms; }
 div.carousel-item.active ul.sub-menu li:nth-child(7) { animation-delay: 700ms; }
 


 #social-media-spinner ul {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  transform: translateY(-50%);
 }

 #social-media-spinner ul li {
  flex: 1;
  opacity: 0;
  justify-content: center;
  align-items: center;
  display: flex;
 }


 #social-media-spinner ul li i {
  display: inline-flex;
  vertical-align: middle;
  transform: translateY(35px);
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
 }

 #social-media-spinner:hover::before {
  transform: scale(1.2);
 }

 #social-media-spinner:hover ul li i {
  transform: translateY(0);
 }
 

 #social-media-spinner:hover ul li:nth-child(1) i {
  transition-delay: 100ms;
 }
 #social-media-spinner:hover ul li:nth-child(2) i {
  transition-delay: 200ms;
 }

 #social-media-spinner:hover ul li:nth-child(3) i {
  transition-delay: 300ms;
 }

 #social-media-spinner:hover ul li:nth-child(4) i {
  transition-delay: 400ms;
 }
 #social-media-spinner:hover ul li:nth-child(5) i {
  transition-delay: 500ms;
 }


 #social-media-spinner:hover ul li {
  animation: popUp cubic-bezier(0.39, 0.575, 0.565, 1) 500ms forwards ;
}

#social-media-spinner ul li {
  animation: popDown cubic-bezier(0.39, 0.575, 0.565, 1) 500ms forwards ;
}

#social-media-spinner:hover span {
  animation: popUp2 cubic-bezier(0.39, 0.575, 0.565, 1) 500ms forwards ;
}

#social-media-spinner span {
  animation: popDown2 cubic-bezier(0.39, 0.575, 0.565, 1) 500ms forwards ;
}



@keyframes popUp {
  0% { opacity:0;
  transform: translateY(100%);}
  100% { opacity:1;
    transform: translateY(0%);}
}

@keyframes popDown {
  0% { 
    opacity:1;
  transform: translateY(0%);}
  100% { 
    opacity:0;
    transform: translateY(100%);}
}

@keyframes popUp2 {
  0% { 
  transform: translateY(0%);}
  100% { 
    transform: translateY(-200%);}
}

@keyframes popDown2 {
  0% { 
  transform: translateY(-200%);}
  100% { 
    transform: translateY(0%);}
}