@media only screen and (min-width:768px) {
a#booking_pop:hover, a#join_pop:hover {border-color:none; background:#000;}
.progress-bar {  animation:progress 30s; text-align:right; color:rgba(255,255,255,100); background:#6daee4 url(/content/images/popup/loading-bar-hr1.png) 0 14px repeat-x; border-radius:8px;}
.booking {background:#fff url(/content/images/popup/popup-bg.gif?v=1) 0 135px no-repeat; background-size:100% 60%; display:inline-block; left:50%; color:#333; width:100%; text-align:justify; top:40%; z-index:10; border-radius:10px; text-align:center; }
.booking.oneway {background:#fff url(/content/images/popup/popup-bg.gif?v=1) 0 55px no-repeat; display:inline-block; left:50%; color:#333; width:100%; text-align:justify; top:40%; z-index:10; border-radius:10px; text-align:center; }
.booking.next-book { background:#fff!important; background-image:none;}
.booking .book-area { padding:25px 25px 114px 25px; }
.booking .book-area.newarea { padding:15px 15px 15px 15px!important; }
.booking .list-popup-head { margin:0; padding:0; color:#08487e; font-size:32px; }
.booking p { padding:10px; font-size:17px; text-align:center}
.booking p span { font-weight:bold;}
.booking .depart {float:left; width:30%; text-align:center; padding:35px 0 15px 0; font-size:16px; background:url(/content/images/popup/listing-loc.png) center top no-repeat; line-height:21px; font-size:19px;}
.booking .depart span.loc-name { font-weight:bold; }
.booking .depart span { display:block;}
.booking .arrival { float:right; width:30%; text-align:center; padding:35px 0 15px 0; font-size:16px; background:url(/content/images/popup/listing-loc.png) center top no-repeat; line-height:21px; font-size:19px;}
.booking .arrival span.loc-name { font-weight:bold;}
.booking .arrival span { display:block;}
.booking .mid-oneway { float:left; width:25%; font-size:16px; text-align:center; margin:10px 0 0 30px; display:none;}
.booking .mid-oneway span { display:block; color:#333;}
.booking .mid-roundway { float:left; width:25%; font-size:16px; text-align:center; margin:42px 0 0 30px;}
.booking .subs { background:#174f86; color:#fff;  font-size:37px; text-align:center; padding:8px 0; border-radius:0 0 2px 2px; }
.book-overlay {background-color:rgba(0, 0, 0, 0.6); bottom:0; cursor:default; left:0; opacity:0; position:fixed; right:0; top:0; visibility:hidden; z-index:1; -webkit-transition:opacity .5s; -moz-transition:opacity .5s; -ms-transition:opacity .5s; -o-transition:opacity .5s; transition:opacity .5s; backdrop:static; keyboard:true; }
.book-overlay:target {visibility:visible; opacity:1;}
.book-overlay:target+.booking {top:50%; opacity:1; visibility:visible;}
.well-done {/*width: 100%; background:#08487e; border-radius:15px;  box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;  overflow:hidden; padding:0;  margin:5px auto;*/display:none}
/*@keyframes progress { from { width: 0; color: rgba(255,255,255,0); } to { width: 100%; color: rgba(255,255,255,1); }}*/
}

@media only screen and (max-width:767px){
a#booking_pop:hover, a#join_pop:hover {border-color:none; background:#000;}
.booking {background:#f8f6f6 url(/content/images/popup/popup-bg.png) 0 0 repeat; display:inline-block; left:50%; color:#333;  width:100%; text-align:justify; top:50%; z-index:10; border-radius:10px; text-align:center;}
.booking .book-area { padding:10px; }
.booking .list-popup-head { margin:0; padding:0; color:#08487e; font-size:25px; }
.booking p { padding:10px 10px 5px 10px; font-size:15px;  text-align:center}
.booking p span { font-weight:bold;}
.booking .depart {float:left; width:100%; text-align:center; padding:5px 0 10px 0; font-size:15px; background:none; line-height:18px; }
.booking .depart span.loc-name { font-weight:bold; } 
.booking .depart span { display:block;}
.booking .arrival { float:right; width:100%; text-align:center; padding:5px 0 10px 0; font-size:15px; background:none; line-height:18px;}
.booking .arrival span.loc-name { font-weight:bold;}
.booking .arrival span { display:block;}
.booking .mid-oneway { float:left; width:100%; font-size:15px; text-align:center; margin:0 auto 5px auto; display:none;}
.booking .mid-oneway span { display:block; color:#333;}
.booking .mid-roundway { float:left; width:100%; font-size:15px; text-align:center; margin:5px auto 5px auto;}
.booking .subs { background:#174f86; color:#fff;  font-size:20px; text-align:center; padding:8px 0; border-radius:0 0 2px 2px; }
.book-overlay {background-color:rgba(0, 0, 0, 0.6); bottom:0; cursor:default; left:0; opacity:0; position:fixed; right:0; top:0; visibility:hidden; z-index:1; -webkit-transition:opacity .5s; -moz-transition:opacity .5s; -ms-transition:opacity .5s; -o-transition:opacity .5s; transition:opacity .5s; backdrop:static; keyboard:true;}
.book-overlay:target {visibility:visible; opacity:1;}
.book-overlay:target+.booking {top:50%; opacity:1; visibility:visible;}
.well-done {/*width: 100%; background:#08487e; border-radius:15px;  box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;  overflow:hidden; padding:0;  margin:5px auto;*/ display:none}
.progress-bar {  animation:progress 50s; text-align:right; color:rgba(255,255,255,100); background:#6daee4 url(/content/images/popup/loading-bar-hr1.png) 0 14px repeat-x; border-radius:8px; }
/*@keyframes progress { from { width: 0; color: rgba(255,255,255,0); } to { width: 100%; color: rgba(255,255,255,1); }}*/
}