/* z-index -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#soundBtn {z-index: 1;}
#model1 {z-index: 2;}
#topMenu {display: none;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#soundBtn {position: absolute; bottom: 10px; right: 0px; width: 100px; height: 37px; border-radius: 30px; border-bottom-right-radius: 0; border-top-right-radius: 0;}
#soundBtn {background-color: rgba(0, 0, 0, 1);}
#soundBtn:hover {background-color: white; }
#soundBtn:hover #soundOn {color: black;}
#soundBtn:hover #soundOff {color: black;}
#soundBtn:hover #eq .level:after {background: black;}

#soundBtn #soundOn {color: white; position: absolute; bottom: 5px; left: 15px; display: none; transition: all 1s;}
#soundBtn #soundOff {color: white; position: absolute; bottom: 5px; left: 15px;}
#soundBtn.active #soundOn {display: block; animation: soundAni 495ms linear infinite alternate;}
#soundBtn.active #soundOff {display: none;}
@keyframes soundAni {20% {bottom: 7px} 40% {bottom: 5px} 60% {bottom: 3px} 80% {bottom: 6px} 100% {bottom: 5px}}

#model1 {position: absolute; bottom: 10px; right: 110px; background-color: #ccad10; color: black; border: none; height: 37px; line-height: 30px;}
#model1:hover {color: white;}

#video {width: 100%; position: relative; margin-top: 60px; overflow: hidden;}
#video video {width: 100%; display: block; }

/* eq -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@keyframes pump-it-up1 {20% {} 40% {height: 44px;} 60% {height: 28px;} 80% {height: 42px;} 100% {height: 49px;}}
@keyframes pump-it-up2 {20% {} 40% {height: 6px;} 60% {height: 14px;} 80% {height: 24px;} 100% {height: 30px;}}
@keyframes pump-it-up3 {20% {} 40% {height: 21px;} 60% {height: 30px;} 80% {height: 24px;} 100% {height: 30px;}}
@keyframes pump-it-up4 {20% {} 40% {height: 30px;} 60% {height: 13px;} 80% {height: 36px;} 100% {height: 6px;}}
@keyframes pump-it-up5 {20% {} 40% {height: 30px;} 60% {height: 27px;} 80% {height: 25px;} 100% {height: 3px;}}
@keyframes pump-it-up6 {20% {} 40% {height: 24px;} 60% {height: 30px;} 80% {height: 24px;} 100% {height: 3px;}}
@keyframes pump-it-up7 {20% {} 40% {height: 20px;} 60% {height: 6px;} 80% {height: 20px;} 100% {height: 30px;}}
@keyframes pump-it-up8 {20% {} 40% {height: 13px;} 60% {height: 2px;} 80% {height: 17px;} 100% {height: 22px;}}
@keyframes pump-it-up9 {20% {} 40% {height: 25px;} 60% {height: 30px;} 80% {height: 15px;} 100% {height: 14px;}}

#eq {width: 100%; z-index: 101; position: absolute; top: 15px; left: 25px; transform: scale(0.5);}
#eq .level {width: 2px; margin-left: 1px; display: inline-block; position: relative;}
#eq .level:after {content: ' '; position: absolute; bottom: 9px; left: 0; background: white; width: 3px;}

#eq .level.level1.active:after {height: 30px; animation: pump-it-up1 495ms linear infinite alternate;}
#eq .level.level2.active:after {height: 25px; animation: pump-it-up2 340ms linear infinite alternate;}
#eq .level.level3.active:after {height: 19px; animation: pump-it-up3 800ms linear infinite alternate;}
#eq .level.level4.active:after {height: 7px; animation: pump-it-up4 630ms linear infinite alternate;}
#eq .level.level5.active:after {height: 10px; animation: pump-it-up5 305ms linear infinite alternate;}
#eq .level.level6.active:after {height: 12px; animation: pump-it-up6 346ms linear infinite alternate;}
#eq .level.level7.active:after {height: 12px; animation: pump-it-up7 385ms linear infinite alternate;}
#eq .level.level8.active:after {height: 3px; animation: pump-it-up8 424ms linear infinite alternate;}
#eq .level.level9.active:after {height: 6px; animation: pump-it-up9 661ms linear infinite alternate;}

#eq .level.level1:after {height: 20px;}
#eq .level.level2:after {height: 28px;}
#eq .level.level3:after {height: 19px;}
#eq .level.level4:after {height: 7px;}
#eq .level.level5:after {height: 10px;}
#eq .level.level6:after {height: 12px;}
#eq .level.level7:after {height: 12px;}
#eq .level.level8:after {height: 3px;}
#eq .level.level9:after {height: 6px;}

#contact_btn {background-color: white;}
#contact_btn span {color: black;}
#contact_btn span.text {color: black;}
#contact_btn:hover  {background-color:black;}
#contact_btn:hover span.text {color: white;}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {

    #soundBtn {left: 0;  bottom: 80px; border-radius: 30px; border-bottom-left-radius: 0; border-top-left-radius: 0;}
    #model1 {bottom: 30px; left: 110px; right: initial;}

    #mainMenu {position: fixed;}
    #video {margin-top: 0px;}
    footer {margin-top: -10px;}
}
@media screen and (min-width: 1440px) {

}
@media screen and (min-width: 1920px) {

}
@media screen and (min-width: 1921px) {
    /* #video {margin-top: 10px;} */
}
@media screen and (min-width: 2560px) {
    #video {overflow: hidden;}
    #video video {width: 2560px;}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */