.elevation{
    -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.48); 
box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.48);
transition: 0.3s;

}
.elevationcard {
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: 0.3s;
}

.elevationcard:hover {
    backdrop-filter: blur(19px) saturate(100%);
    -webkit-backdrop-filter: blur(19px) saturate(100%);
    background-color: rgba(12, 12, 12, 0.12);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s;
    
    
}
.bodycard {
    background-color: #000000;
    background-image: 
        radial-gradient(at 47% 33%, hsl(178.26, 90%, 55.00000000000001%) 0, transparent 59%), 
        radial-gradient(at 82% 65%, hsl(348.29, 99%, 57.99999999999999%) 0, transparent 55%);
}
.elevation:hover{
    transition: transform 2s ease-in-out;
        -webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.48); 
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.48);
transition: 0.3s;
}


.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    border: 0px solid rgba(209, 213, 219, 0.3);
    Border-bottom-width:1px;
}

.btn {transition: 0.3s;}
.btn:hover {transition: 0.3s;}


input.hub-search-bar-input{
    border: 1px #000000;
    border-radius: 12px;
}
.info-box{
box-shadow: 5px 10px 40px rgba(0, 0, 0, 0.2);}
.verticalalign{vertical-align: bottom;}
.btn:hover{
    
	transition: transform 0.6s ease-in-out;}
	
.box--speaker{
    transition: transform 0.6s ease-in-out;
}
.box--speaker:hover{
    background-color: white;
}

/* Floating*/
.floating {
    animation: floating 5s infinite;
    animation-timing-function: ease-in-out;

}
.floating2 {
    animation: floating2 5s infinite;
    animation-timing-function: ease-in-out;

}
.floating3 {
    animation: floating3 5s infinite;
    animation-timing-function: ease-in-out;
}


@keyframes floating {
    0%      { transform: translate(-80%, 68%); }
    50%     { transform: translate(-80%, 78%); }
    100%    { transform: translate(-80%, 68%); }    
}
@keyframes floating2 {
    0%      { transform: translate(130%, 68%); }
    50%     { transform: translate(130%, 48%); }
    100%    { transform: translate(130%, 68%); } 
    50%     { transform: translate(130%, 58%); }
    100%    { transform: translate(130%, 68%); } 
}
@keyframes floating3 {
    0%      { transform: translate(0%, 0%); }
    25%     { transform: translate(0%, -3%); }
    50%    { transform: translate(0%, 1%); } 
    75%     { transform: translate(0%, 3%); }
    100%    { transform: translate(0%, -0%); } 
}

  .myfirst {
      animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}


.slide-in-blurred-bottom {
	-webkit-animation: slide-in-blurred-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1500 both;
	        animation: slide-in-blurred-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1500 both;
}

@-webkit-keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 2s cubic-bezier(0.680, -0.550, 0.265, 1.550) alternate forwards;
	        animation: swing-in-top-fwd 2s cubic-bezier(0.680, -0.550, 0.265, 1.550) alternate forwards;
}

@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference){
    .slide-in-bottom {
    	-webkit-animation: slide-in-bottom 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s both;
    	        animation: slide-in-bottom 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s both;
    }
}
.delay11{
    animation-delay:1.1s;
}
.delay12{
    animation-delay:1.2s;
}
.delay13{
    animation-delay:1.3s;
}
.delay14{
    animation-delay:1.4s;
}
.delay15{
    animation-delay:1.5s;
}
.delay16{
    animation-delay:1.6s;
}
/*Button render*/
.button--mimas {
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 700;
	font-size: 0.85rem;
	border-radius: 0.5rem;
	overflow: hidden;
	color: #fff;
	background: #e7e7e7;
}

.button--mimas span {
	position: relative;
	mix-blend-mode: difference;
}

.button--mimas::before {
	content: '';
	background: #000;
	width: 120%;
	left: -10%;
	transform: skew(30deg);
	transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.button--mimas:hover::before {
	transform: translate3d(100%,0,0);
}
.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-12-23 17:2:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}