#interactive {position:relative; background:#eae7d8 url(/static/images/interactive/nbus/bg-title.png) no-repeat 50% 0; background-size:100%;}
#interactive .inner {padding:19.85% 10px 17.5%; background:url(/static/images/interactive/nbus/bg-finalize.png) no-repeat 50% 100%; background-size:100%;}
#interactive .ground {position:relative; margin:0 auto 20px; max-width:587px;}
#interactive .ground .route {position:absolute; width:100%; height:100%; top:0; left:0; background:no-repeat 0 0; background-size:100% auto;}
#interactive .line-nums {text-align:center; position:relative;}
#interactive .line-nums li {position:relative; display:inline-block; margin:0 10px 20px; width:49px; height:59px;}
#interactive .line-nums li a {display:block; height:100%; background:url(/static/images/interactive/nbus/racquet.png) no-repeat 0 0; line-height:47px;font-size:12px; color:#686866;}
#interactive .line-nums li a:hover {background-position:0 -59px;}
#interactive .line-nums li a:active,
#interactive .line-nums li a.active {background-position:0 -118px;}
#interactive .line-nums li #clickme {position:absolute; text-indent:-5000em; background:url(/static/images/interactive/nbus/click.png) no-repeat 0 0; width:51px; height:35px; top:-40px; left:-3px;
animation:bounce 1.3s ease infinite; -webkit-animation:bounce 1.3s ease infinite;}

#interactive .screen {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; background:rgba(0,0,0,0); filter:alpha(opacity=0);}
#interactive .screen.fadein {display:block; background:rgba(0,0,0,0.5); filter:alpha(opacity=50); 
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear; 
    -o-transition: all 0.6s linear; 
    transition: all 0.6s linear;
}

#opinfo {display:none; position:absolute; top:15.85%; width:89.24%; left:5.38%; height:57.85%; background:#c8c6ba;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
}
#opinfo .endpoint {position:relative; height:14.87%; background-color:#328ccb; padding-left:6.39%; padding-top:5.41%;}
#opinfo .endpoint img {float:left; height:75.32%; margin-right:5px;}
#opinfo .endpoint span {display:block; padding-top:5.44%; color:#fff;}
#opinfo .times {padding-left:48%; height:77.07%; background:no-repeat 0 0; background-size:auto 100%;}
#opinfo.n10 .times {background-image:url(/static/images/interactive/nbus/n10_time.png);}
#opinfo.n13 .times {background-image:url(/static/images/interactive/nbus/n13_time.png);}
#opinfo.n16 .times {background-image:url(/static/images/interactive/nbus/n16_time.png);}
#opinfo.n26 .times {background-image:url(/static/images/interactive/nbus/n26_time.png);}
#opinfo.n30 .times {background-image:url(/static/images/interactive/nbus/n30_time.png);}
#opinfo.n37 .times {background-image:url(/static/images/interactive/nbus/n37_time.png);}
#opinfo.n40 .times {background-image:url(/static/images/interactive/nbus/n40_time.png);}
#opinfo.n61 .times {background-image:url(/static/images/interactive/nbus/n61_time.png);}
#opinfo.n62 .times {background-image:url(/static/images/interactive/nbus/n62_time.png);}
#opinfo .times .routes {height:93.46%; background:#f4f3ef; margin-right:5%; border-left:1px solid #c8c6ba; overflow:scroll;}
#opinfo .times .routes li {min-height:28px; padding-left:35px; line-height:28px; color:#4c4c4b; font-size:1.2em; background:url(/static/images/interactive/nbus/points.png) no-repeat 14px -72px;}
#opinfo .times .routes li:nth-child(odd) {background-color:#eae7d8;}
#opinfo .times .routes li:first-child {background-position:14px 6px;}
#opinfo .times .routes li:last-child {background-position:14px -179px;}
#opinfo a {position:absolute; top:0; right:0; width:30px; height:30px; background:url(/static/images/interactive/nbus/button-closer.png) no-repeat 50% 50%; text-indent:-5000em;}
@media screen and (max-width:680px) {
  #interactive #opinfo {top:12%;}
}
@media screen and (max-width:500px) {
  #interactive #opinfo {top:9%;}
  #opinfo .times {background-size:auto 90%;}
}
@media screen and (max-width:390px) {
  #interactive {padding-top:30%; background-position:50% 10%;}
  #interactive #opinfo {top:3%;}
  #interactive #opinfo .endpoint span {padding-top:2%;}
  #opinfo .times {background-size:auto 80%;}
}
@media screen and (max-width:370px) {
  #opinfo {padding-bottom:15%;}
  #opinfo .times {padding-left:0; padding-top:80%; height:77.07%; background-size:80% auto; }
  #opinfo .times .routes {margin-top:42%; height:60%; margin-right:0; border-left:1px solid #c8c6ba; overflow:scroll;}
}
@media screen and (max-width:320px) {
  #interactive {padding-top:50%; background-position:50% 15%;}
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}