body {background: #fff; padding: 150px 0 0; font-family: 'Roboto', sans-serif;}
.interactive-bus-container {position: relative; width: 1000px; margin: 60px auto 0 auto}
.bus-img {text-align: center; padding: 40px 0;}
.bus-img img {width: 950px;}
.interactive-options {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.option {width: 300px; transition: all 0.3s linear;}
.option.not-active {opacity: 0.3;}
.option.active {z-index: 3;}
.option.active .tile {transition: all 0.3s linear; visibility: visible; opacity: 1;}
.option .tile {opacity: 0; position: absolute; top: -100px; left: 15px; z-index: 2; width: 300px; box-shadow: 7px 5px 17px -4px #000; visibility: hidden; cursor: auto;}
.option .tile .logo {text-align: center; background: #fff; padding: 30px 80px;}
.option .tile .logo img {max-width: 100%;}
.option .tile .info {background: #066842; color: #fff; padding: 30px;}
.option .tile .info .title {text-transform: uppercase; font-size: 16px; font-weight: 500; margin-bottom: 10px;}
.option svg {width: 60px; height: 60px;}
.option svg path, .option svg circle {stroke: #066842;}
.option.active svg path, .option.active svg circle {stroke: #ed501b;}
.option .icon {position:relative; float: left; margin-right: 15px;}
.option .name {font-weight: 500; padding-top: 10px; font-size: 14px; line-height: 1.1; float: left;}
.option .long-line {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 110px; border-left: 1px dashed #000;}
.option .short-line {position: absolute; top: 100%; left: 0; width: 90px; height: 1px; border-bottom: 1px dashed #000;}
.option .ball {border: 3px solid #fff; background: #066842; position: absolute; left: 100%; top: -8px; width: 12px; height: 12px; border-radius: 100%; cursor: pointer;}
.option.active .ball {background: #ed501b;}
.option.gps {position: absolute; top: 0; left: 240px;}
.option.gps .empty {position: absolute; width: 200px; height: 200px;}
.option.gateway {position: absolute; top: -100px; left: 530px;}
.option.gateway .name {padding-top: 20px;}
.option.gateway .long-line {height: 190px;}
.option.gateway .short-line {width: 0;}
.option.gateway .ball {left: 50%; transform: translateX(-50%);}
.option.wifi {position: absolute; top: 105px; left: 0;}
.option.wifi .empty {position: absolute; width: 295px; height: 100px;}
.option.wifi .long-line {height: 30px;}
.option.wifi .short-line {width: 190px;}
.option.wifi .white-line {position: absolute; height: 1px; border-bottom: 1px dashed #fff; right: 0; width: 60px}
.option.wifi .name {padding-top: 30px;}
.option.realtime {position: absolute; bottom: 170px; left: 15px; width: 400px;}
.option.realtime .long-line {top: auto; bottom: 110%; height: 100px;}
.option.realtime .short-line {top: 0; width: 145px;}
.option.realtime .empty {position: absolute; top: -115px; width: 150px; height: 180px;}
.option.surveillance {position: absolute; top: 0; left: 705px;}
.option.surveillance .long-line {transform: none; left: -40px; top: 50%; height: 135px;}
.option.surveillance .short-line {width: 35px; top: 0;}
.option.surveillance .ball {top: 100%; left: 50%; transform: translateX(-50%);}
.option.surveillance .icon {margin-right: 8px;}
.option.surveillance .empty {position: absolute; left: -50px; width: 115px; height: 200px;}
.option.surveillance .tile {top: -110px;}
.option.electric {position: absolute; bottom: -40px; left: 320px;}
.option.electric .icon {margin-right: 5px;}
.option.electric .short-line {width: 0; top: 0; left: 0; border-color: #fff;}
.option.electric .white-line-long {position: absolute; height: 150px; top: 0; border-left: 1px dashed #fff; left: -1px;}
.option.electric .long-line {top: -370px; height: 375px;}
.option.electric .ball {left: -9px;}
.option.automated {position: absolute; bottom: 50px; right: 290px;}
.option.automated .white-line-long {position: absolute; height: 175px; top: 0; border-left: 1px dashed #fff; left: -1px;}
.option.automated .long-line {top: -280px; height: 275px;}
.option.automated .short-line {width: 145px; top: 0; left: 0; border-color: #fff;}
.option.automated .ball {left: 145px;}
.option.automated .empty {position: absolute; top: -280px; height: 285px; width: 195px;}
.option.cad {position: absolute; bottom: 90px; right: -150px;}
.option.cad .icon {margin-right: 8px;}
.option.cad .name {padding-top: 18px;}
.option.cad .long-line {top: -20px; height: 45px; left: -210px;}
.option.cad .short-line {width: 210px;}
.option.cad .white-line {position: absolute; border-left: 1px dashed #fff; height: 180px; top: -180px; left: -1px;}
.option.cad .ball {left: -8px;}
.option.cad .tile {top: -140px;}
.option.cad .empty {position: absolute; top: -215px; width: 50px; height: 260px; left: -225px;}
.option.cad .empty2 {position: absolute; top: 0; width: 200px; height: 50px; left: -190px;}
.option.clipper {position: absolute; top: 280px; right: -205px;}
.option.clipper .short-line {left: auto; right: 60px; width: 160px; top: 50%;}
.option.clipper .white-line {position: absolute; top: 0; left: 0; width: 90px; border-bottom: 1px dashed #fff; height: 1px;}
.option.clipper .ball {left: 0;}
.option.clipper .empty {position: absolute; height: 50px; left: -170px; top: 0; width: 170px;}
.option.clipper .tile {right: 15px; left: auto; top: -200px;}
.option.digital {position: absolute; top: 105px; right: -160px;}
.option.digital .long-line {height: 18px;}
.option.digital .short-line {right: 0; left: auto; width: 120px;}
.option.digital .white-line {position: absolute; border-bottom: 1px dashed #fff; height: 1px; top: 18px; right: 70px; width: 50px; z-index: 2;}
.option.digital .ball {left: 0;}
.option.digital .tile {right: 15px; left: auto;}
.option.digital .empty {position: absolute; top: 55px; width: 150px; height: 50px; left: -100px;}


/*overwrite*/
.container .interactive-bus-container {
}