Services

/* =AnimationStuff ----------------------------------------------- */ /* =Animated Video Screen ----------------------------------------------- */ @keyframes aniscreen{ 0% {background-position: 0px 192px;} 4% {background-position: 0px 0px;} 8% {background-position: 0px -190px;} 12% {background-position: 0px -381px;} 16% {background-position: 0px -572px;} 20% {background-position: 0px -763px;} 24% {background-position: 0px -954px;} 28% {background-position: 0px -1145px;} 100% {background-position: 0px -1337px;} } @-moz-keyframes aniscreen /* Firefox */{ 0% {background-position: 0px 192px;} 4% {background-position: 0px 0px;} 8% {background-position: 0px -190px;} 12% {background-position: 0px -381px;} 16% {background-position: 0px -572px;} 20% {background-position: 0px -763px;} 24% {background-position: 0px -954px;} 28% {background-position: 0px -1145px;} 100% {background-position: 0px -1337px;} } @-webkit-keyframes aniscreen /* Chrome */{ 0% {background-position: 0px 192px;} 4% {background-position: 0px 0px;} 8% {background-position: 0px -190px;} 12% {background-position: 0px -381px;} 16% {background-position: 0px -572px;} 20% {background-position: 0px -763px;} 24% {background-position: 0px -954px;} 28% {background-position: 0px -1145px;} 100% {background-position: 0px -1337px;} } @-o-keyframes aniscreen /* Opera */{ 0% {background-position: 0px 192px;} 4% {background-position: 0px 0px;} 8% {background-position: 0px -190px;} 12% {background-position: 0px -381px;} 16% {background-position: 0px -572px;} 20% {background-position: 0px -763px;} 24% {background-position: 0px -954px;} 28% {background-position: 0px -1145px;} 100% {background-position: 0px -1337px;} } /* =Animated Speaker ----------------------------------------------- */ @keyframes anispeaker { 0% {transform: scale(1.1)} 100% {transform: scale(1)} } @-moz-keyframes anispeaker /* Firefox */{ 0% {-moz-transform: scale(1.1)} 100% {-moz-transform: scale(1)} } @-webkit-keyframes anispeaker { 0% {-webkit-transform: scale(1.1)} 100% {-webkit-transform: scale(1)} } @-o-keyframes anispeaker { 0% {-o-transform: scale(1.1)} 100% {-o-transform: scale(1)} } /* =Animated Laser ----------------------------------------------- */ @keyframes laser{ 0% {background: red; left:0px; top:0px; transform:rotate(130deg);} 25% {background: yellow; left:200px; top:0px; transform:rotate(60deg);} 50% {background: blue; left:200px; top:200px; transform:rotate(130deg);} 75% {background: green; left:0px; top:200px; transform:rotate(60deg);} 100% {background: red; left:0px; top:0px; transform:rotate(130deg);} } @-moz-keyframes laser /* Firefox */{ 0% {background: red; left:0px; top:0px; -moz-transform: rotate(130deg);} 25% {background: yellow; left:200px; top:0px; -moz-transform: rotate(60deg);} 50% {background: blue; left:200px; top:200px; -moz-transform: rotate(130deg);} 75% {background: green; left:0px; top:200px;-moz-transform: rotate(60deg);} 100% {background: red; left:0px; top:0px;-moz-transform: rotate(130deg);} } @-webkit-keyframes laser /* Safari and Chrome */{ 0% {background: red; left:0px; top:0px; -webkit-transform: rotate(130deg);} 25% {background: yellow; left:200px; top:0px; -webkit-transform: rotate(60deg);} 50% {background: blue; left:200px; top:200px; -webkit-transform: rotate(130deg);} 75% {background: green; left:0px; top:200px; -webkit-transform: rotate(60deg);} 100% {background: red; left:0px; top:0px; -webkit-transform: rotate(130deg);} } @-o-keyframes laser /* Opera */{ 0% {background: red; left:0px; top:0px; -o-transform:rotate(130deg);} 25% {background: yellow; left:200px; top:0px; -o-transform:rotate(60deg);} 50% {background: blue; left:200px; top:200px; -o-transform:rotate(130deg);} 75% {background: green; left:0px; top:200px; -o-transform:rotate(60deg);} 100% {background: red; left:0px; top:0px; -o-transform:rotate(130deg);} } /* =Animation Divs ----------------------------------------------- */ #laserbutton { background: url("https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/eventscreensetup1.png") repeat scroll 0 0 transparent; height: 420px; width: 650px; position: relative; margin: auto; z-index: 10; } #laserbeam1 { transform-origin: 0 50%; -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; height: 2px; margin-left: 35px; position: static; width: 400px; z-index: 99999; } #laserbeam2 { transform-origin: 0 50%; -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; height: 2px; margin-left: 35px; position: static; width: 400px; z-index: 99999; } #laserbeam3 { transform-origin: 0 50%; -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; height: 2px; margin-left: 35px; position: static; width: 400px; z-index: 99999; } #laserbeam4 { transform-origin: 0 50%; -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; height: 2px; margin-left: 35px; position: static; width: 400px; z-index: 99999; } #laserbeam5 { transform-origin: 0 50%; -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; height: 2px; margin-left: 35px; position: static; width: 400px; z-index: 99999; } #laserbeam6 { transform-origin: 0 50%; -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; height: 2px; margin-left: 35px; position: static; width: 400px; z-index: 99999; } #laserbutton:hover #laserbeam1{ animation: laser 3s; -moz-animation: laser 3s; /* Firefox */ -webkit-animation: laser 3s; /* Safari and Chrome */ -o-animation: laser 3s; /* Opera */ -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } #laserbutton:hover #laserbeam2{ animation: laser 3s; -moz-animation: laser 3s; /* Firefox */ -webkit-animation: laser 3s; /* Safari and Chrome */ -o-animation: laser 3s; /* Opera */ -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } #laserbutton:hover #laserbeam3{ animation: laser 3s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; -moz-animation: 3s ease 1s normal none infinite laser; /* Firefox */ -webkit-animation: laser 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: laser 3s; -o-animation-timing-function: ease; -o-animation-delay: 1s; -o-animation-iteration-count: infinite;/* Opera */ } #laserbutton:hover #laserbeam4{ animation: laser 3s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; -moz-animation: 3s ease 1s normal none infinite laser; /* Firefox */ -webkit-animation: laser 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: laser 3s; -o-animation-timing-function: ease; -o-animation-delay: 1s; -o-animation-iteration-count: infinite;/* Opera */ } #laserbutton:hover #laserbeam5{ animation: laser 3s; animation-timing-function: ease; animation-delay: 2s; animation-iteration-count: infinite; -moz-animation: 3s ease 2s normal none infinite laser; /* Firefox */ -webkit-animation: laser 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: laser 3s; -o-animation-timing-function: ease; -o-animation-delay: 2s; -o-animation-iteration-count: infinite;/* Opera */ } #laserbutton:hover #laserbeam6{ animation: laser 3s; animation-timing-function: ease; animation-delay: 2s; animation-iteration-count: infinite; -moz-animation: 3s ease 2s normal none infinite laser; /* Firefox */ -webkit-animation: laser 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: laser 3s; -o-animation-timing-function: ease; -o-animation-delay: 2s; -o-animation-iteration-count: infinite;/* Opera */ } #videoscreen { background: url("https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/videoanimationbkg7.jpg") repeat scroll 0px 0px transparent; height: 191px; left: 170px; position: absolute; top: 30px; width: 310px; background-position: 0px 192px; z-index: -1; } #laserbutton:hover #videoscreen{ animation: aniscreen 12s; animation-timing-function: ease-in-out; animation-delay: 200ms; animation-iteration-count: infinite; -moz-animation: 12s ease-in-out 200ms normal none infinite aniscreen; /* Firefox */ -webkit-animation: aniscreen 12s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 200ms; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: aniscreen 12s; -o-animation-timing-function: ease-in-out; -o-animation-delay: 200ms; -o-animation-iteration-count: infinite; /* Opera */ } #laserbox1 { background: url("https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/laserbox.jpg") repeat scroll 0 0 transparent; height: 10px; margin: 0; padding-top: 5px; position: absolute; width: 46px; top: 30px; left: 68px; } #laserbox2 { background: url("https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/laserbox.jpg") repeat scroll 0 0 transparent; height: 10px; margin: 0; padding-top: 5px; position: absolute; width: 46px; top: 30px; left: 538px; } #speaker1 { background: url(https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/speaker1.png); width: 123px; height: 279px; position: absolute; top: 113px; left: 33px; z-index: -1; } #speaker2 { background: url(https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/speaker2.png); width: 123px; height: 279px; position: absolute; top: 113px; left: 497px; z-index: -1; } #laserbutton:hover #speaker1{ animation: anispeaker 500ms; animation-timing-function: ease; animation-delay: 500ms; animation-iteration-count: infinite; -moz-animation: 500ms ease 500ms normal none infinite anispeaker; /* Firefox */ -webkit-animation: anispeaker 500ms; -webkit-animation-timing-function: ease; -webkit-animation-delay: 500ms; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: anispeaker 500ms; -o-animation-timing-function: ease; -o-animation-delay: 500ms; -o-animation-iteration-count: infinite; /* Opera */ } #laserbutton:hover #speaker2{ animation: anispeaker 500ms; animation-timing-function: ease; animation-delay: 500ms; animation-iteration-count: infinite; -moz-animation: 500ms ease 500ms normal none infinite anispeaker; /* Firefox */ -webkit-animation: anispeaker 500ms; -webkit-animation-timing-function: ease; -webkit-animation-delay: 500ms; -webkit-animation-iteration-count: infinite; /* Safari and Chrome */ -o-animation: anispeaker 500ms; -o-animation-timing-function: ease; -o-animation-delay: 500ms; -o-animation-iteration-count: infinite; /* Opera */ } #djbooth { background: url("https://digitalchemist.live/wp-content/uploads/sites/73/2021/03/DJbooth.png") repeat scroll 0 0 transparent; height: 315px; left: 183px; position: absolute; top: 99px; width: 294px; z-index: -1; } @media only screen and (max-width: 767px) { #speaker1 { left:120px; } #speaker2 { left:395px; } #djbooth { left:170px; z-index: 2 } #laserbox1 { left:170px; } #laserbox2 { left:435px; } #videoscreen { left:170px; } #laserbutton { left:-160px; } #laserbeam1 { left:0px; z-index: 3} #laserbeam2 { left:0px; z-index: 3} #laserbeam3 { left:0px; z-index: 3} #laserbeam4 { left:0px; z-index: 3} #laserbeam5 { left:0px; z-index: 3} }