body { background-image: none; font-family: 'Open Sans', sans-serif; font-size: 0.85em; width: 100%; color: #ffffff; min-width: 320px; }
#page { width: 100%; }
div, input, button { box-sizing: border-box; }
.OCB { font-family: 'Open Sans Condensed', sans-serif; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
input, button { height: 32px; font-family: 'Open Sans Condensed', sans-serif; border-radius: 3px; border: none; }
input { padding: 1px 5px; }
p { line-height: 120%; }
h1, h2, h3, h4, h5, h6 { color: #009EE0; }
h1 { clear: both; }
.col50 { display: block; width: 50%; float: left;  }
input { width: 100%; max-width: 300px; margin: 5px 0; }
textarea { font-size: 1.0em; padding: 2px 0; }
.sweet-alert button { height: auto; }

/*--------------- Header ---------------*/
#header { width: 100%; }

#upperHeader { height: 110px; width: 100%; margin: 0 auto; position: relative; border-bottom: 2px solid #ffffff; }
#logoWrapper { height: 100%; float: left; margin-left: calc(50% - 600px); }

#logoWrapper img { height: 90px; margin: 10px 22px; }
#topMenu { list-style: none; float: right; margin: 5px 0; margin-right: calc(50% - 600px); }
#topMenu li { display: inline-block; border-left: 2px solid #B7C900; }
#topMenu li:first-child { border: none; }
#topMenu li a { color: #009EE0; margin: 0 15px;}

#topMenuIcon { float: right; cursor: pointer; padding: 20px 10px; display: none;}
#topMenuIcon img { height: 25px; margin: 5px;}
#burgerWhite { display: none; }

.bgChangedActive { background-color: #009EE0; }

#headerTextbox { background-color: #009EE0; height: 53px; border-radius: 50px 0 0 0; position: absolute; bottom: 0; right: 0; padding-right: calc(50% - 600px); }
#headerTextbox > div { font-size: 1.6em; margin: 12px 20px 12px 45px; }

#headerSearch { height: 55px; width: 100%; clear: both; border-bottom: 5px solid #ffffff; position: relative; }
#stationWrapper { background-color: #009EE0; width: calc(50% - 390px); min-width: 210px; float: left; height: 100%; }
#stationWrapper div { float: right; font-size: 1.4em; margin: 12px 24px; }

#searchTickets { background-color: #B7C900; width: calc(50% + 390px); float: left; height: 50px; }
#searchTickets > div { font-size: 1.4em; margin: 12px 12px 12px 30px; overflow: hidden; display: inline-block; float: left; color: #000000; }
#searchTickets > input[type="text"] { font-size: 1.4em; display: inline-block; float: left; margin: 9px 0; padding: 0 5px; width: 30%; max-width: 300px; }
#searchTickets > input[type="submit"] { font-size: 1.4em; color: #ffffff; background-color: #009EE0; border: 1px solid #ffffff; margin: 9px 13px; padding: 0; cursor: pointer; width: 160px; }

#hiddenSearchMenu { display: none; width: 100%; background-color: #B7C900; position: absolute; z-index: 999; top: 0; right: 0; left: 0; border-bottom: 5px solid #ffffff; }
#hiddenSearchMenu input[type="submit"] { max-width: 600px; font-size: 1.4em; color: #ffffff; background-color: #009EE0; border: 1px solid #ffffff; margin: 8px 5%; padding: 0; cursor: pointer; width: 90%; }
#hiddenSearchMenu input[type="text"] { max-width: none; }
#findTickets { float: left; margin: 2px 0 2px 20px; }
#showSearchButton img { height: 22px; margin: 4px 16px 4px 10px; float: left; }
#searchWrap {  width: 156px; overflow: hidden; margin: 0 auto; }

#stationMobile { background-color: #009EE0; width: 100%; overflow: hidden; color: #ffffff; font-size: 1.3em; padding: 13px 5%; height: 50px; }
#hiddenFormWrapper { width: 90%; margin: 0 5%; overflow: hidden; }
#hiddenSearchForm { display: none; color: #000000; width: 100%; margin: 0; overflow: hidden; }
#hiddenSearchForm input { font-size: 1.4em; float: left; margin: 8px 0; padding: 0 5px; width: calc(100% - 52px); }
#hiddenSearchForm .formTitle { font-size: 1.4em; margin: 12px 12px 12px 0; float: left; color: #000000; width: 40px; text-align: right; clear: both; }
#collapseArrow { border-radius: 0 0 40px 40px; cursor: pointer; display: none; position: absolute; bottom: -46px; left: calc(50% - 46px); z-index: -1; background-color: #B7C900; border: 5px solid #ffffff; border-top: none; }
#collapseArrow img { width: 30px; padding: 8px 24px 16px 24px; }

.paddingBottomActive { padding-bottom: 7px; }

.autocomplete-suggestions {max-height: 2000px !important; border: 1px solid gray; }
.autocomplete-suggestions .autocomplete-suggestion { cursor: pointer; padding: 1px 5px; background-color: #ffffff; color: #000000;  }
.autocomplete-suggestions .autocomplete-suggestion:hover { background-color: #009EE0; color: #ffffff; }


/*--------------- Content ---------------*/
#content {width: 100%; max-width: 1200px; background-color: #070B06; background-image: url(/Images/template/images/bannerbg_01x1.jpg); background-repeat: no-repeat; margin: 0 auto; }
#mainTextboxWrapper, #mainTabsWrapper { width: 100%; overflow: hidden; }
#mainTabsWrapper { min-width: 303px; }
.mainTextbox { width: 100%; max-width: 650px;  float: left; padding: 35px 45px; font-size: 2.3em; text-shadow: 1px 1px #000000; }
.mainTextbox p { margin: 0 0 30px 0; }
.mainTextbox p:last-child { margin: 0; }

.mainTab { width: 45%; float: left; margin: 0 2.5% 2.5% 2.5%; }
.tabTextWrapper { min-height: 238px; overflow: hidden; background-color: #ffffff; color: #000000; padding: 22px; font-size: 0.95em; border-top: 5px solid #B7C900; box-shadow: 4px 4px 4px rgba(0,0,0,0.4); }
.tabTextWrapper p { margin: 0 0 22px 0; }
.tabTextWrapper p:last-child { margin-bottom: 10px; }
#rightTabText { width: calc(100% - 110px); float: left; }
#rightTabImg { width: 110px; float: left; }
#rightTabImg img { height: 140px; padding: 20px; }

.tabTitleWrapper { height: 46px; background-color: #00567A; border: 1px solid #009EE0; font-size: 1.8em; border-radius: 0 30px 0 0; }
#tabTitle1 { width: 180px; }
#tabTitle2 { width: 265px; }
#tabTitle3 { display: none; }
.tabTitle {padding: 6.5px 40px 6.5px 20px; }

.leftTabReadMore { font-style: italic; font-weight: bold; }


/*--------------- Content Page ---------------*/
#normalPageWrapper { width: 100%; max-width: 1200px; color: black; margin: 0 auto; padding: 10px 20px 30px 20px; overflow: hidden; min-height: 300px; }
@media only screen and (min-height: 960px) { #normalPageWrapper { min-height: 403px; } }
#normalPageWrapper input[type="submit"] { background-color: #009EE0; color: #ffffff; border: 1px solid #ffffff; }
#normalPageWrapper input[type="submit"]:hover { background-color: #00567A; cursor: pointer; }
button:hover { background-color: #00567A !important; }
#normalPageWrapper input { border: 1px solid rgb(169, 169, 169); background: none; font-size: 1.2em; }
#normalPageWrapper select { height: 32px; font-size: 1.1em; }
#normalPageWrapper a { color: #00567A; font-weight: bold; }

#stationsStartingWith { font-size: 1.4em; font-weight: bold; }
#stationsStartingWith > div { margin: 15px 0; }
#stationsStartingWith > div > div { float: left; color: #000000; text-align: center; width: 7.69%; padding: 5px; overflow: hidden; }
#stationsStartingWith > div > div:hover { background-color: #009EE0; border-radius: 5px; }
#stationsStartingWith > div > div:hover a { color: #ffffff; }
#stationsStartingWith > div > div > a { width: 100%; }
#stationsStartingWith > div > div > a:hover { text-decoration: none; }

.station { width: 20%; float: left; padding: 5px; border-bottom: 1px solid #B7C900; }
.station .splits { width: 19px; height: 19px; float: left; overflow: hidden; }
.station .splits img { padding: 1px; }
.station .link { width: calc(100% - 19px); float: left; }

.route { width: 33.33%; float: left; padding: 5px; border-bottom: 1px solid #B7C900; }
.route .splits { width: 19px; height: 19px; float: left; overflow: hidden; }
.route .splits img { padding: 1px; }
.route .link { width: calc(100% - 19px); float: left; padding-left: 5px; }

.BookTicketsOnline { margin: 0 !important; margin: 10px; padding: 15px 30px; max-width: 800px; font-weight:bold; background-color: #BFDD7C; border: 1px solid gray; }
.BookTicketsOnline h3 { padding-left: 30% !important; }
#bookTicketsWrapper, .bookTicketsWrapper div { overflow: hidden; }
.BookTicketsOnline .selectTitle { width: 30%; clear: both; float: left; padding: 6.5px 10px; text-align: right; margin-bottom: 10px; }
.BookTicketsOnline .bookTicketsSelect { height: 32px; width: 70%; float: left; margin-bottom: 10px; }
.BookTicketsOnline .bookTicketsSelect select { width: 100%; max-width: 300px; height: 32px; border-radius: 3px; }

.BookTicketsOnline input[type="submit"] { padding: 5px 15px; margin-left: 30%; }

.registerButtons { width: 100%; text-align: center; overflow: hidden; }
.registerButtons > div { width: 50%; float: right; }

.loginWrapper { margin: 20px; }
.loginWrapper .loginInputTitle { width: 20%; text-align: right; float: left; padding: 6.5px 15px; margin-bottom: 10px; clear: both; }
.loginWrapper .loginInput { width: 80%; float: left; margin-bottom: 10px; }
.loginWrapper .loginInput input { width: 300px; margin-top: 0; }
.loginButton, .forgottenPass { clear: both; margin-left: 20%; }

.contactUsForm { padding: 20px; }
.contactUsForm .contactUsTitle { width: 30%; float: left; text-align: right; padding: 6.5px 15px; margin-bottom: 10px; }
.contactUsForm .contactUsInput { width: 70%; float: left; margin-bottom: 10px; }
.contactUsForm .contactUsInput input, .contactUsForm .contactUsInput textarea { width: 100%; max-width: 350px; float: left; }
.contactUsForm .contactUsButton { margin-left: 30%; clear: both; float: left;}

.registerForm .ItemDescription { width: 20%; text-align: right; float: left; padding: 6.5px 15px; margin-bottom: 10px; clear: both; }
.registerForm .registrationField { width: 80%; float: left; margin-bottom: 10px; }
.registerForm .registrationField input { margin: 0; }
.registerForm .fieldAddress { margin-left: 20%; }
.registrationContinue { clear: both; margin-left: 20%; }

#trainTicketsFrom > div { width: 33.33%; float: left; }

.registerButtons input { font-size: 1.1em !important; padding: 5px !important; }
.cashbackImage { width: 232px; float: right; }
.cashbackImage img { width: 90%; padding: 5%; }
.registerDescription { width: calc(100% - 232px); float: right; text-align: justify; }

.displayData { margin: 0; }

#returnTime, #returnTimeSelect { display: none; }

/*--------------- Upper Footer ---------------*/
#upperFooter { width: 100%; margin: 0 auto; overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; border-bottom: 5px solid #ffffff; border-top: 5px solid #ffffff; }
#upperFooter > div { float: left; width: 50%;  }

#advertBannerContainer { align-items: stretch; position: relative; float: left; width: 50%; overflow: hidden; background-color: #00567A; }
#advertBannerContainer img { position: absolute; max-height: calc(100% - 60px); max-width: calc(100% - 60px); top: 0; bottom: 0; right: 0; margin: auto; border: 1px solid #009EE0; }
#advertImage2 { display: none; }

#tweetsContainer { background-color: #009EE0; position: relative; float: left; width: 50%; padding-top: 5px; }
#upperHeaderTweetIcon { height: 26px; position: absolute; right: 35px; top: 20px; }
#tweetsWrapper { margin: 10px 30px 25px 30px; }
#tweetsTitle { margin-left: 80px; margin-right: 65px; font-size: 1.85em; }
.tweet { margin: 10px 0 15px 0; overflow: hidden; }
.tweetTime { width: 70px; margin-right: 10px; float: left; font-size: 0.95em; }
.tweetText { width: calc(100% - 80px); float: left; font-size: 0.95em; }
.tweetText a { color: #ffffff; }


/*--------------- Lower Footer ---------------*/
#lowerFooter { width: 100%; margin: 0 auto; }

#wideMenuWrapper { width: 100%; background-color: #00567A; overflow: hidden; }
#bottomMenu { width: 100%; max-width: 1200px; overflow: hidden; margin: 0 auto; }
.menuColumn { width: 33.33%; float: left; text-align: left; padding: 25px 30px 15px 30px; }
.menuColumn:last-child { float: left; text-align: center; }
.menuColumn ul { list-style: none; padding: 0; margin: 0; }
.menuColumn ul li { margin-bottom: 6px; }
.menuColumn ul li a { color: white; font-size: 0.95em; }
#socialIcons { margin: 20px auto; width: 105px; overflow: hidden; }
.socialIcon { height: 26px; float: left; margin: 0 15px; }
#keepUp { font-size: 1.3em; }

#pageBottomWrapper { width: 100%; background-color: #009EE0; overflow: hidden; border-top: 3px solid #B7C900;  }
#pageBottom { width: 100%; max-width: 1200px; overflow: hidden; font-size: 0.95em; margin: 0 auto; }
#pageBottom > div { width: 50%; float: left; padding: 9.5px 30px; }
#copyright { text-align: left; }
#webDesign { text-align: right; }
#webDesign a { color: #ffffff; }

/*--------------- Media queries ---------------*/

@media only screen and (min-height: 800px) and (min-width: 1200px) {
  #normalPageWrapper { min-height: 403px; }
}

@media only screen and (min-width: 1201px) and (max-width: 1217px) {
  #stationWrapper { width: 17.5% !important; min-width: initial; }
  #searchTickets { width: 82.5% !important; }
}

@media only screen and (min-width: 1201px) {
  #advertBannerContainer { padding-left: calc(50% - 600px); }
  #tweetsContainer { padding-right: calc(50% - 600px); }
  #upperHeaderTweetIcon { right: calc(100% - 565px) }
  #advertBannerContainer img { right: 30px; }
}

@media only screen and (max-width: 1200px) {
  #advertBannerContainer img { left: 0; }
}

@media only screen and (max-width: 1200px) {
  #searchTickets { width: calc(100% - 210px); }
  #logoWrapper { margin-left: 0; }
  #headerTextbox { padding-right: 0; }
  #topMenu { margin-right: 0; }
}

@media only screen and (max-width: 1100px) {
  .station { width: 25%; }
  .route { width: 50%; }
}

@media only screen and (max-width: 1050px) {
  #searchTickets > input[type="submit"] { width: 140px; }
  #searchTickets > input[type="text"] { width: 28%; }
  #searchTickets > div { margin-left: 20px; margin-right: 10px; }
}

@media only screen and (max-width: 1000px) {
  .mainTextbox { font-size: 2.2em; }
  .tabTextWrapper { padding: 10px 22px; }
  #trainTicketsFrom > div { width: 100%; }
}

@media only screen and (max-width: 900px) {
  #rightTabImg { width: 90px; }
  #rightTabText { width: calc(100% - 90px); }
  #rightTabImg img { padding: 30px 10px; }
  #advertImage2 { display: block; }
  #advertImage1 { display: none; }
  #stationWrapper { min-width: 150px; }
  #searchTickets { width: calc(100% - 150px); }
}

@media only screen and (max-width: 850px) {
  .loginWrapper .loginInputTitle { width: 30%; }
  .loginWrapper .loginInput { width: 70%; }
  .loginButton, .forgottenPass { margin-left: 30%; }
  .contactUsForm .contactUsTitle { width: 100%; text-align: left; margin-bottom: 0; padding-left: 0; }
  .contactUsForm .contactUsInput { width: 100%; margin-bottom: 0; }
  .contactUsForm .contactUsButton { margin-left: 0; margin-top: 10px; }
}

@media only screen and (max-width: 820px) {
  #searchTickets > input[type="submit"] { width: 120px; }
  #searchTickets > input[type="text"] { width: 27%; }
  #searchTickets > div { margin-left: 10px; margin-right: 6px; margin: 14px 6px 14px 10px; font-size: 1.2em; }
  #logoWrapper { height: 77px; }
  #logoWrapper img { height: 62px; margin: 10px 12px 5px 12px; }
}

@media only screen and (max-width: 800px) {
  .subscribeWrapper div { width: 100% !important; text-align: left !important; margin-bottom: 0 !important; padding-left: 0 !important; margin-left: 0 !important; }
  .registerForm .ItemDescription { width: 30%; }
  .registerForm .registrationField { width: 70%; }
  .registerForm .fieldAddress { margin-left: 30%; }
  .registrationContinue { margin-left: 30%; }
}

@media only screen and (min-width: 791px) {
  .tabTitleWrapper {background-color: #00567A !important; border: 1px solid #009EE0 !important; color: white !important; }
}

@media only screen and (max-width: 790px) {
  #mainTab2 { display: none; }
  #mainTab1 {width: 95%; }
  #tabTitle1 { width: 130px; margin-right: 10px; background-color: #B7C900; border-color: #B7C900; color: #000000; }
  #tabTitle3 { display: block; width: 200px; }
  .tabTitleWrapper { font-size: 1.5em; float: left; }
  .tabTitle { padding: 9px 20px 9px 15px; }
  .tabTextWrapper { clear: both; padding: 20px; }
   #searchTickets > input { width: 25%; }
  .station { width: 33.33%; }
  .route { width: 100%; padding-left: 20px; }
  .registerButtons > div { width: 100%; }
}


@media only screen and (max-width: 730px) {
  #upperFooter { display: block; }
  #upperFooter > div { width: 100%; }
  #advertBannerContainer { overflow: hidden; clear: both; align-items: initial; }
  #advertImage2 { display: none; }
  #advertImage1 { display: block; }
  #advertBannerContainer > img { max-height: calc(100% - 40px); max-width: calc(100% - 40px); position: initial; margin: 20px auto; }

  #upperHeader { height: 130px; }
  #headerTextbox > div { font-size: 1.3em; margin: 13px 20px 13px 40px; }
  #headerTextbox { height: 50px; }

  #stationsStartingWith .col50 { width: 100%; }
}

@media only screen and (max-width: 680px) {
  #stationWrapper { min-width: 100px; }
  #searchTickets { width: calc(100% - 100px); }
  .cashbackImage { margin: 0 auto; float: none !important; }
  .registerDescription { width: 100% !important; }
}

@media only screen and (min-width: 621px) {
  #topMenu ul { display: block !important; }
  #searchTickets { display: block !important; }
}

@media only screen and (max-width: 620px) {
  #topMenu ul { display: none; position: absolute; top: 78px; right: 0; left: 0; display: none; background-color: #009EE0; z-index: 9999; margin: 0; padding: 0; font-size: 1.5em; }
  #topMenu ul li { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid #ffffff !important; color: #ffffff; text-align: center; padding: 0;}
  #topMenu ul li:hover { background-color: #00567A; }
  #topMenu ul li a { color: #ffffff; width: 100%; padding: 10px 0; display: block; margin: 0; }
  #topMenu ul li a:hover { text-decoration: none; }
  #topMenuIcon { display: block; }
  #stationWrapper { display: none; }
  #searchTickets { display: none; }
  #hiddenSearchMenu { display: block; min-height: 50px; }
  .station { width: 50%; }
}

@media only screen and (max-width: 550px) {
  #socialIcons { width: 85px; }
  .socialIcon { margin: 0 10px; }
  #tweetsWrapper { margin: 10px 15px 25px 15px; }
  .tweetTime { width: 100%; margin-bottom: 10px; }
  .tweetText { width: 100%; }
  #tweetsTitle { margin-left: 0; }
  .mainTextbox { font-size: 2.0em; }
  .mainTextbox p:first-child { margin-bottom: 20px; }
  .displayData { margin: 0; }
  .BookTicketsOnline { margin: 0 !important; }
  .displayData table tr td:first-child { display: none; }
  .BookTicketsOnline h3 { padding-left: 0 !important; margin-bottom: 0 !important; }
  .BookTicketsOnline .selectTitle { width: 100%; text-align: left; margin: 0; padding: 0; margin-top: 10px; }
  .BookTicketsOnline .bookTicketsSelect { width: 100%; margin: 0; }
  .BookTicketsOnline input[type="submit"] { margin-left: 0; }
  .loginWrapper .loginInputTitle { width: 100%; text-align: left; padding-left: 0; margin-bottom: 0; }
  .loginWrapper .loginInput { width: 100%; }
  .loginButton, .forgottenPass { margin-left: 0; }
  .registerForm .ItemDescription { width: 100%; text-align: left; margin-bottom: 0; padding-left: 0; }
  .registerForm .registrationField { width: 100%; margin-bottom: 0; }
  .registerForm .fieldAddress { margin-left: 0; margin-top: 10px; }
  .registrationContinue { margin-left: 0; }
}


@media only screen and (max-width: 500px) {
  .sweet-alert { top: 30%; }
  .sweet-alert .sa-icon { display: none !important; }
  .sweet-alert h2 { margin: 0; font-size: 1.2em; }
  .sweet-alert p { font-size: 1.0em; }
}


@media only screen and (max-width: 470px) {
  .tabTextWrapper { padding: 10px; }
  #stationsStartingWith .col50 { width: 50%; }
  #stationsStartingWith > div > div { float: none; margin: 10px auto; width: 30px; }
}

@media only screen and (max-width: 458px) {
  .mainTextbox { padding: 25px 20px; }
}

@media only screen and (max-width: 450px) {
  .menuColumn { width: 50%; padding: 30px 10px 0 15px; }
  .menuColumn:last-child { clear: both; margin: 0 auto; width: 100%; padding-top: 15px; }
  #pageBottom > div { padding: 9.5px 10px; }
}

@media only screen and (max-width: 430px) {
  .station { width: 100%; }
  .station .link { padding-left: 20px; }
}

@media only screen and (max-width: 400px) {
  .loginWrapper .loginInput input { width: 100%; }
}

@media only screen and (max-width: 390px) {
  .tabTitleWrapper { font-size: 1.3em; }
  .tabTitle { padding: 11px 10px 11px 10px; }
  #tabTitle1 { width: 105px; }
  #tabTitle3 { width: 160px; }
  #content { max-height: none; }
  #rightTabImg img { padding: 20px 10px; }
  #normalPageWrapper { padding: 10px; }
}