@import url(http://fonts.googleapis.com/css?family=Montserrat); body {background:#333;height:400px;} .mainwrapper { position:relative; display:block; padding:40px 60px; margin:0 auto; width:400px; } .faderwrapper { position:relative; display:block; width:50px; height:306px; float:left; margin-right:30px; } .faderwrapper:before { position:absolute; display:block; content:""; width:2px; height:300px; top:2px; left:23px; background:#333; border:1px solid rgba(0,0,0,0.4); -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4),0px 0px 2px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4),0px 0px 2px 0px rgba(255, 255, 255, 0.25); } .fader{ position:absolute; display:block; width:100%; height:100%; top:0; left:0; margin:0; padding:0; } .fader .scale { position:relative; display:block; width:100%; height:2%; margin:0; padding:0; z-index:10; cursor:pointer; } .knob { position:absolute; display:block; width:20px; height:20px; left:14px; bottom:-2%; -webkit-border-radius: 20px; border-radius: 20px; border:1px solid rgba(0,0,0,0.9); background: rgb(244,244,244); background: -moz-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%, rgba(209,209,209,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(209,209,209,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); background: radial-gradient(ellipse at center, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d1d1d1',GradientType=1 ); -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); z-index:9; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; } .knob:before { position:absolute; display:block; content:""; width:6px; height:6px; top:6px; left:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid rgba(0,0,0,0.4); background: rgb(226,0,0); background: -moz-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%, rgba(137,0,0,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(226,0,0,1)), color-stop(100%,rgba(137,0,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); background: radial-gradient(ellipse at center, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e20000', endColorstr='#890000',GradientType=1 ); -webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.2); } .fader .scale:hover ~ .knob:before { background: rgb(149,224,0); background: -moz-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%, rgba(90,135,0,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(149,224,0,1)), color-stop(100%,rgba(90,135,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); background: radial-gradient(ellipse at center, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95e000', endColorstr='#5a8700',GradientType=1 ); } .scalelabel { position:absolute; display:block; width:40px; height:20px; bottom:-2%; right:-15px; opacity:0; border:1px solid rgba(0,0,0,0.6); -webkit-border-radius:0 2px 2px 0; border-radius:0 2px 2px 0; background: rgb(102,102,102); background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(51,51,51,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(51,51,51,1))); background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); background: -o-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); background: -ms-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); background: linear-gradient(to bottom, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25),inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.2), 1px 0px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25),inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.2), 1px 0px 4px 0px rgba(0, 0, 0, 0.5); z-index:8; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; } .scalelabel:before { position:relative; display:block; content:"0"; color:#fff; text-align:right; padding-right:5px; font-family: 'Montserrat', sans-serif; font-size:12px; font-weight:bold; line-height:20px; } .fader .scale[data-perc="0"]:hover ~ .knob,.fader .scale[data-perc="0"]:hover ~ .scalelabel {bottom:-2%;} .fader .scale[data-perc="2"]:hover ~ .knob,.fader .scale[data-perc="2"]:hover ~ .scalelabel {bottom:0%;} .fader .scale[data-perc="4"]:hover ~ .knob,.fader .scale[data-perc="4"]:hover ~ .scalelabel {bottom:2%;} .fader .scale[data-perc="6"]:hover ~ .knob,.fader .scale[data-perc="6"]:hover ~ .scalelabel {bottom:4%} .fader .scale[data-perc="8"]:hover ~ .knob,.fader .scale[data-perc="8"]:hover ~ .scalelabel {bottom:6%;} .fader .scale[data-perc="10"]:hover ~ .knob,.fader .scale[data-perc="10"]:hover ~ .scalelabel {bottom:8%} .fader .scale[data-perc="12"]:hover ~ .knob,.fader .scale[data-perc="12"]:hover ~ .scalelabel {bottom:10%;} .fader .scale[data-perc="14"]:hover ~ .knob,.fader .scale[data-perc="14"]:hover ~ .scalelabel {bottom:12%;} .fader .scale[data-perc="16"]:hover ~ .knob,.fader .scale[data-perc="16"]:hover ~ .scalelabel {bottom:14%;} .fader .scale[data-perc="18"]:hover ~ .knob,.fader .scale[data-perc="18"]:hover ~ .scalelabel {bottom:16%;} .fader .scale[data-perc="20"]:hover ~ .knob,.fader .scale[data-perc="20"]:hover ~ .scalelabel {bottom:18%;} .fader .scale[data-perc="22"]:hover ~ .knob,.fader .scale[data-perc="22"]:hover ~ .scalelabel {bottom:20%;} .fader .scale[data-perc="24"]:hover ~ .knob,.fader .scale[data-perc="24"]:hover ~ .scalelabel {bottom:22%;} .fader .scale[data-perc="26"]:hover ~ .knob,.fader .scale[data-perc="26"]:hover ~ .scalelabel {bottom:24%;} .fader .scale[data-perc="28"]:hover ~ .knob,.fader .scale[data-perc="28"]:hover ~ .scalelabel {bottom:26%;} .fader .scale[data-perc="30"]:hover ~ .knob,.fader .scale[data-perc="30"]:hover ~ .scalelabel {bottom:28%;} .fader .scale[data-perc="32"]:hover ~ .knob,.fader .scale[data-perc="32"]:hover ~ .scalelabel {bottom:30%;} .fader .scale[data-perc="34"]:hover ~ .knob,.fader .scale[data-perc="34"]:hover ~ .scalelabel {bottom:32%;} .fader .scale[data-perc="36"]:hover ~ .knob,.fader .scale[data-perc="36"]:hover ~ .scalelabel {bottom:34%;} .fader .scale[data-perc="38"]:hover ~ .knob,.fader .scale[data-perc="38"]:hover ~ .scalelabel {bottom:36%;} .fader .scale[data-perc="40"]:hover ~ .knob,.fader .scale[data-perc="40"]:hover ~ .scalelabel {bottom:38%;} .fader .scale[data-perc="42"]:hover ~ .knob,.fader .scale[data-perc="42"]:hover ~ .scalelabel {bottom:40%;} .fader .scale[data-perc="44"]:hover ~ .knob,.fader .scale[data-perc="44"]:hover ~ .scalelabel {bottom:42%;} .fader .scale[data-perc="46"]:hover ~ .knob,.fader .scale[data-perc="46"]:hover ~ .scalelabel {bottom:44%;} .fader .scale[data-perc="48"]:hover ~ .knob,.fader .scale[data-perc="48"]:hover ~ .scalelabel {bottom:46%;} .fader .scale[data-perc="50"]:hover ~ .knob,.fader .scale[data-perc="50"]:hover ~ .scalelabel {bottom:48%;} .fader .scale[data-perc="52"]:hover ~ .knob,.fader .scale[data-perc="52"]:hover ~ .scalelabel {bottom:50%;} .fader .scale[data-perc="54"]:hover ~ .knob,.fader .scale[data-perc="54"]:hover ~ .scalelabel {bottom:52%;} .fader .scale[data-perc="56"]:hover ~ .knob,.fader .scale[data-perc="56"]:hover ~ .scalelabel {bottom:54%;} .fader .scale[data-perc="58"]:hover ~ .knob,.fader .scale[data-perc="58"]:hover ~ .scalelabel {bottom:56%;} .fader .scale[data-perc="60"]:hover ~ .knob,.fader .scale[data-perc="60"]:hover ~ .scalelabel {bottom:58%;} .fader .scale[data-perc="62"]:hover ~ .knob,.fader .scale[data-perc="62"]:hover ~ .scalelabel {bottom:60%;} .fader .scale[data-perc="64"]:hover ~ .knob,.fader .scale[data-perc="64"]:hover ~ .scalelabel {bottom:62%;} .fader .scale[data-perc="66"]:hover ~ .knob,.fader .scale[data-perc="66"]:hover ~ .scalelabel {bottom:64%;} .fader .scale[data-perc="68"]:hover ~ .knob,.fader .scale[data-perc="68"]:hover ~ .scalelabel {bottom:66%;} .fader .scale[data-perc="70"]:hover ~ .knob,.fader .scale[data-perc="70"]:hover ~ .scalelabel {bottom:68%;} .fader .scale[data-perc="72"]:hover ~ .knob,.fader .scale[data-perc="72"]:hover ~ .scalelabel {bottom:70%;} .fader .scale[data-perc="74"]:hover ~ .knob,.fader .scale[data-perc="74"]:hover ~ .scalelabel {bottom:72%;} .fader .scale[data-perc="76"]:hover ~ .knob,.fader .scale[data-perc="76"]:hover ~ .scalelabel {bottom:74%;} .fader .scale[data-perc="78"]:hover ~ .knob,.fader .scale[data-perc="78"]:hover ~ .scalelabel {bottom:76%;} .fader .scale[data-perc="80"]:hover ~ .knob,.fader .scale[data-perc="80"]:hover ~ .scalelabel {bottom:78%;} .fader .scale[data-perc="82"]:hover ~ .knob,.fader .scale[data-perc="82"]:hover ~ .scalelabel {bottom:80%;} .fader .scale[data-perc="84"]:hover ~ .knob,.fader .scale[data-perc="84"]:hover ~ .scalelabel {bottom:82%;} .fader .scale[data-perc="86"]:hover ~ .knob,.fader .scale[data-perc="86"]:hover ~ .scalelabel {bottom:84%;} .fader .scale[data-perc="88"]:hover ~ .knob,.fader .scale[data-perc="88"]:hover ~ .scalelabel {bottom:86%;} .fader .scale[data-perc="90"]:hover ~ .knob,.fader .scale[data-perc="90"]:hover ~ .scalelabel {bottom:88%;} .fader .scale[data-perc="92"]:hover ~ .knob,.fader .scale[data-perc="92"]:hover ~ .scalelabel {bottom:90%;} .fader .scale[data-perc="94"]:hover ~ .knob,.fader .scale[data-perc="94"]:hover ~ .scalelabel {bottom:92%;} .fader .scale[data-perc="96"]:hover ~ .knob,.fader .scale[data-perc="96"]:hover ~ .scalelabel {bottom:94%;} .fader .scale[data-perc="98"]:hover ~ .knob,.fader .scale[data-perc="98"]:hover ~ .scalelabel {bottom:96%;} .fader .scale[data-perc="100"]:hover ~ .knob,.fader .scale[data-perc="100"]:hover ~ .scalelabel {bottom:98%;} .fader .scale[data-perc="0"]:hover ~ .scalelabel:before {content:"0";} .fader .scale[data-perc="2"]:hover ~ .scalelabel:before {content:"2";} .fader .scale[data-perc="4"]:hover ~ .scalelabel:before {content:"4";} .fader .scale[data-perc="6"]:hover ~ .scalelabel:before {content:"6";} .fader .scale[data-perc="8"]:hover ~ .scalelabel:before {content:"8";} .fader .scale[data-perc="10"]:hover ~ .scalelabel:before {content:"10";} .fader .scale[data-perc="12"]:hover ~ .scalelabel:before {content:"12";} .fader .scale[data-perc="14"]:hover ~ .scalelabel:before {content:"14";} .fader .scale[data-perc="16"]:hover ~ .scalelabel:before {content:"16";} .fader .scale[data-perc="18"]:hover ~ .scalelabel:before {content:"18";} .fader .scale[data-perc="20"]:hover ~ .scalelabel:before {content:"20";} .fader .scale[data-perc="22"]:hover ~ .scalelabel:before {content:"22";} .fader .scale[data-perc="24"]:hover ~ .scalelabel:before {content:"24";} .fader .scale[data-perc="26"]:hover ~ .scalelabel:before {content:"26";} .fader .scale[data-perc="28"]:hover ~ .scalelabel:before {content:"28";} .fader .scale[data-perc="30"]:hover ~ .scalelabel:before {content:"30";} .fader .scale[data-perc="32"]:hover ~ .scalelabel:before {content:"32";} .fader .scale[data-perc="34"]:hover ~ .scalelabel:before {content:"34";} .fader .scale[data-perc="36"]:hover ~ .scalelabel:before {content:"36";} .fader .scale[data-perc="38"]:hover ~ .scalelabel:before {content:"38";} .fader .scale[data-perc="40"]:hover ~ .scalelabel:before {content:"40";} .fader .scale[data-perc="42"]:hover ~ .scalelabel:before {content:"42";} .fader .scale[data-perc="44"]:hover ~ .scalelabel:before {content:"44";} .fader .scale[data-perc="46"]:hover ~ .scalelabel:before {content:"46";} .fader .scale[data-perc="48"]:hover ~ .scalelabel:before {content:"48";} .fader .scale[data-perc="50"]:hover ~ .scalelabel:before {content:"50";} .fader .scale[data-perc="52"]:hover ~ .scalelabel:before {content:"52";} .fader .scale[data-perc="54"]:hover ~ .scalelabel:before {content:"54";} .fader .scale[data-perc="56"]:hover ~ .scalelabel:before {content:"56";} .fader .scale[data-perc="58"]:hover ~ .scalelabel:before {content:"58";} .fader .scale[data-perc="60"]:hover ~ .scalelabel:before {content:"60";} .fader .scale[data-perc="62"]:hover ~ .scalelabel:before {content:"62";} .fader .scale[data-perc="64"]:hover ~ .scalelabel:before {content:"64";} .fader .scale[data-perc="66"]:hover ~ .scalelabel:before {content:"66";} .fader .scale[data-perc="68"]:hover ~ .scalelabel:before {content:"68";} .fader .scale[data-perc="70"]:hover ~ .scalelabel:before {content:"70";} .fader .scale[data-perc="72"]:hover ~ .scalelabel:before {content:"72";} .fader .scale[data-perc="74"]:hover ~ .scalelabel:before {content:"74";} .fader .scale[data-perc="76"]:hover ~ .scalelabel:before {content:"76";} .fader .scale[data-perc="78"]:hover ~ .scalelabel:before {content:"78";} .fader .scale[data-perc="80"]:hover ~ .scalelabel:before {content:"80";} .fader .scale[data-perc="82"]:hover ~ .scalelabel:before {content:"82";} .fader .scale[data-perc="84"]:hover ~ .scalelabel:before {content:"84";} .fader .scale[data-perc="86"]:hover ~ .scalelabel:before {content:"86";} .fader .scale[data-perc="88"]:hover ~ .scalelabel:before {content:"88";} .fader .scale[data-perc="90"]:hover ~ .scalelabel:before {content:"90";} .fader .scale[data-perc="92"]:hover ~ .scalelabel:before {content:"92";} .fader .scale[data-perc="94"]:hover ~ .scalelabel:before {content:"94";} .fader .scale[data-perc="96"]:hover ~ .scalelabel:before {content:"96";} .fader .scale[data-perc="98"]:hover ~ .scalelabel:before {content:"98";} .fader .scale[data-perc="100"]:hover ~ .scalelabel:before {content:"100";} .fader .scale:hover ~ .scalelabel {opacity:1;}
FULL PRODUCTION
We offer a wide range of full service production packages. From small setups for bar and club gigs to large scale setups for outdoor concerts and everything in between. Each production package we deploy for our clients is based on the needs of the client and the designated venue, not a one size fits all solution.
Each event  location is researched, including a site survey, to determine the type and amount of equipment required to properly produce the event and meet the clients expectations. If technical riders are involved, you can be sure we have those needs covered as well, with access to an extensive inventory of tour grade equipment that will fullfill even the most demanding tech riders.
On event day, our crew will be on duty with a professional attitude, ready to produce your event and
handle all the technical details involved for a smooth experience for you and those that attend the event.
CaptiveMediaLLC 2016 - All Rights Reserved