@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.locationsBackground {
    background: #d9d9d9;
    padding: 15px;
    margin-top: 10px;
}

.spacenum {
    font-size: 35px;
    margin-top: 0px;
}

.row.table {
    padding-top: 40px;
    max-width: 900px;

}

.table table-striped {
    float: right;
}

.content_tabs ul:after {
    display: block;
    clear: both;
    content: "";
}

.content_tabs ul {
    display: flex;
    flex-wrap: balance;
    justify-content: center;
}

.content_tabs ul li {
    width: 33%;
    float: left;
    text-align: center;
    list-style: none;
    padding: 25px 15px;
    font-size: 16px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.content_tabs ul li a {
    font-family: 'Open Sans Light', sans-serif !important;
    color: #000;
    text-decoration: none;
}

.content_tabs ul li:hover {
    box-shadow: 0 0 10px 1px #ddd;
    background: #D9D9D9;
}

.content_tabs ul li img {
    width: 220px;
    height: 150px;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}

.content_tabs ul li span {
    display: block;
}

.titleHeader.text-right {
    text-align: right;
}

.titleHeader.inner {
    text-align: left;
    border-bottom: 1px solid #000;
}

.titleHeader.text-left {
    text-align: left;
}

#trainTicketBtn {
    margin-top: 15px;
    padding-bottom: 10px;
}

#trainTicketBtn td {
    text-align: right;
}

#trainTicketBtn .fa {
    vertical-align: bottom;
}

#trainTicketBtn td strong {
    padding-bottom: 5px;
    display: inline-block;
    padding-left: 5px;
}

#trainTicketBtn a {
    margin-top: 15px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #fff;
}

#trainTicketBtn a:hover {
    text-decoration: none;
    color: #fff;
}

#trainTicketBtn a:active {
    text-decoration: none;
    color: #000000;
}

#trainTicketBtn a:focus {
    text-decoration: none;
    color: #000000;
}

#trainTicketBtn {
    float: right;
    margin-right: 30px;
}

#menubutton {
    padding: 20px 0 15px 10px;
    margin: 0 0 0 5px !important;
    background-color: transparent;
    border-width: 0;
}

#header_name h1 {
    margin: 0;
}

#header_name {
    margin-left: 100px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

body {
    font-family: 'Open Sans Light', sans-serif;
    color: #59636f;
}

a {
    color: #da1a35;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    font-family: 'Open Sans', sans-serif;
}

a:focus {
    text-decoration: none;
}

#top-nav {
    border-bottom: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.46);
    background-color: #101B13;
    border-top: 0;
    color: #485865;
    position: relative;
    z-index: 1;
    padding: 15px 0px 10px 0px;
}

#top-nav.fixed,
#top-nav.fixed #searchBox form,
#top-nav.fixed #searchBox button span,
#top-nav.fixed h1 {
    background-color: #101B13;
    color: #fff;
}

#top-nav.fixed h1 {
    color: #fff;
}

#mainLogo {
    padding: 0 !important;
}

#logo {
    height: 60px;
    padding: 4px 0 7px 0;
    width: auto;
}

#header_name h1:before {
    content: "\f1b9";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 12px;
}

#appstore {
    padding: 0;
}

#appstore p {
    color: #7DC14B !important;
}

#top-nav.fixed #appstore {
    margin-top: 0;
}

#loginBtn a {
    letter-spacing: 2px;
}

#loginBtn,
#trainTicketBtn {
    display: inline-block;
}

#loginBtn a,
#trainTicketBtn a {
    margin-top: 13px;
}

#loginBtn a:hover,
#trainTicketBtn a:hover {
    color: #40594D !important;
}

.login_register .content_tabs ul li {
    min-height: 215px;
}

.content_section>.col-md-2 {
    background: linear-gradient(to bottom, #101B13 60px, #40594D 60px);
    margin-top: 0px;
    padding-top: 60px;
}

/* content area */
.page-content {
    padding-top: 15px;
    background: transparent;
    padding-left: 6vw
}

.page-content a.btn {
    font-family: gilroy-regular, arial, sans-serif;
    border-radius: 2px;
    border-color: silver;
    font-size: 17px;
    color: #485865 !important;
    padding: 15px;
    margin-bottom: 10px;
    text-align: left;
    border: 1px solid #D9D9D9 !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
    background: #fff !important;
    -webkit-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
    text-shadow: none;
    box-shadow: inset 0 -3px 3px #eee;
}

.page-content a.btn:hover {
    color: #da1a35 !important;
    box-shadow: inset 0 -4px 4px #ddd;
    background: #fff;
    border-color: #ccc;
    text-shadow: none;
}

.titleHeader span:after,
.titleHeader span:before {
    background-color: #485865;
}

.titleHeader {
    font-size: 47px
}

.titleHeader.inner {
    border-bottom: 0;
    margin-left: 12px;
}

.content_tabs ul li
{
    margin: 1%;
    width: 31%;
    box-shadow: 0 0 1px rgba(0,0,0,0.9);
    border-radius: 4px;
    border-bottom: 3px solid #101B13;
    position: relative;
    font-family: "Open Sans Light";
    min-height: 275px;
}

.content_tabs ul li a {
    color: #475764;
    font-size: 20px;
    font-family: "Open Sans Light";
}

.content_tabs ul li img {
    margin-bottom: 15px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    font-family: 'Open Sans', sans-serif;

}

.content_tabs ul li:hover {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.8);
    background: #f2f2f2;
}

.content_tabs ul li:hover img {
    transform: scale(0.95);
}

.parking_status {
    margin: 0 8vw;
    border: 1px solid #929292;
    margin-bottom: 10px;
    padding: 3px;
}

.portal_ofers p {
    font-size: 24px;
}

/*menu*/
#sidebar-menu:before {
    content: "Menu";
    display: block;
    padding: 13px;
    background: #40594D;
    color: #fff;
    font-size: 20px
}

.nav>li>a {
    font-size: 19px;
    padding: 10px;
    color: #485865;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.nav.nav-pills.nav-stacked li a {
    color: inherit;
    background-color: transparent;
}

.nav-pills>li>a {
    border-bottom: 0;
}

ul#sidebar-menu>li {
    color: #fff;
    margin: 0;
    position: relative;
    border-bottom: 1px solid #fff;
    background: transparent !important;
}

ul#sidebar-menu>li>a {
    font-family: 'Open Sans Light', sans-serif;
    color: inherit;
    font-size: 19px;
    padding: 6px 13px 8px 13px;
    background: #101B13;
    right: 0;
    text-shadow: 1px 1px 0px #40594D;
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    -o-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
    overflow: hidden;
}

ul#sidebar-menu>li>a:hover {
    right: -10px;
    background-color: #40594D !important;
    color: inherit !important;
}

ul#sidebar-menu ul>li>a:hover,
ul#sidebar-menuul>li>a:focus {
    color: inherit;
}

ul#sidebar-menu>li ul li {
    padding: 0;
    margin-left: 11px;
    border-bottom: 1px solid #fff;
}

ul#sidebar-menu>li ul li a {
    padding: 7px 13px 7px 13px;
    font-size: 16px;
    color: #fff;
    background: #101B13;
    position: relative;
    box-shadow: none;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    left: 0;
}

ul#sidebar-menu>li ul li a:hover {
    right: -7px;
    padding-right: 20px;
    background-color: #40594D !important;
    color: #fff !important;
}

ul#sidebar-menu>li ul li a:hover,
ul#sidebar-menu>li ul li a:focus {
    color: inherit;
}

.lines,
.lines:before,
.lines:after {
    background: #fff;
}

#loginBtn,
#trainTicketBtn {
    padding: 0;
}

.horizon-pcn-img {
    text-align:center
}

.horizon-pcn-img img{
    max-width:529px; 
    max-height:387px
}

.horizon-pcn {
    text-align: left;
    max-width: 350px;
    margin: 0px auto;
    margin-bottom: 5px;
    padding: 5px;
    color: #fff;
    background-color: #7DC14B;
}

.badge-pay {
    background-color: #ce0808;
    color:#fff;
}

.badge-pay:hover {
    background-color: #b50707;
    color:#fff;
}

.mobile {
    display: none;
}

#footer {
    background: #101B13;
}

@media (max-width:1200px) {
    #appstore {
        display: none;
    }

    .titleHeader {
        font-size: 40px
    }
}

@media (max-width: 1100px) {
    .page-content {
        padding-left: 0;
    }
}

@media (max-width:992px) {
    #trainTicketBtn .fa {
        font-size: 28px;
    }

    .content_section>.col-md-2 {
        padding-top: 0 !important;
    }

    .content_section>.col-md-2 .nav {
        max-height: 70vh;
    }

    .other_srvc_items p {
        padding-top: 0;
    }

    .page_header {
        min-height: 0;
    }

    .login_register {
        margin-top: 10px;
    }

    ul#sidebar-menu>li>a:hover {
        right: 0;
    }

    ul#sidebar-menu>li ul li {
        margin-left: 0;
    }
}

@media (max-width:767px) {
    .content_tabs ul {
        padding: 0 35px;
    }

    .content_tabs ul li {
        width: auto !important;
        float: none;
        margin-bottom: 20px;
        min-height: auto;
        padding: 25px 15px 0 15px;
        width: 50%;
    }

    .content_tabs ul li img {
        width: 220px !important;
    }

    #header_name {
        float: inherit;
    }

    #top-nav h1 {
        margin: 0;
        text-align: right;
        padding: 10px 3px;
    }

    .titleHeader {
        font-size: 24px;
    }
    
    .titleHeader span:after,
    .titleHeader span:before {
        width: 20px;
        left: -20px;
    }

    .titleHeader span:after {
        left: auto;
        right: -20px;
    }

    #trainTicketBtn td strong {
        width: 35px;
        overflow: hidden;
        height: 20px;
    }

    #loginBtn {
        margin-right: 0;
        position: relative;
    }

    #loginBtn,
    #trainTicketBtn {
        padding: 5px 3px;
    }

    .page-content {
        padding-top: 0px;
    }
}

@media (max-width:525px) {
    .content_tabs ul li img {
        width: 100%;
    }
}

@media (max-width:480px) {
    .titleHeader {
        font-size: 18px;
    }

    .content_tabs ul li span {
        min-height: 60px;
    }

    .login_register .content_tabs ul li img {
        width: 60px !important;
        height: 60px !important;
    }

    #logo {
        height: 40px;
        margin-left: 0px;
        margin-top: 5px;
        margin-bottom: 0px;
    }

    #loginBtn {
        display: block;
    }

    #header_name {
        float: left;
        clear: both;
        margin-left: 10px;
    }
    .horizon-pcn-img img{
        max-width:100%;
    }
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}