﻿/* Large desktops and laptops */
@media (min-width: 1633px) {
    .sharexpress-content {
        padding-right: 380px !important;
    }

    .buspool-content {
        padding-left: 155px !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .buspool-content {
        left: 3% !important;
        padding-right: 400px !important;
    }

    .buspool-content, .carpool-content { /*#our-products-content*/
        padding-right: 110px !important;
        padding-left: 10px !important;
        /*left: 5% !important;*/
    }

    .sharexpress-content {
        padding-left: 0px !important;
        right: -28% !important;
        padding-right: 423px !important; /*350*/
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }
}

@media (max-width: 1099px) and (min-width: 992px) {
    .sharexpress-content {
        padding-left: 0px !important;
        right: -28% !important;
        padding-right: 368px !important;
    }
}

@media (max-width: 1043px) {
    #about-us {
        top: 25% !important;
        padding-bottom: 400px !important;
        padding-top: 25px !important;
    }

    #about-us-content-1 {
        top: 45% !important; 
    }

    #about-us-content-2 {
        top: 45% !important;
    }
}

@media (max-width: 991px) and (min-width: 769px) { /*991*/
    h3 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #about-us {
       top: 20% !important;
       padding-bottom: 400px !important;
       padding-top: 25px !important;
    }

    #about-us-content-1 {
        top: 42% !important; 
        left: 8% !important; 
        width: 40% !important;
        line-height: 25px;
    }

    #about-us-content-2 {
        top: 42% !important;
        left: 52% !important; 
        width: 40% !important;
        line-height: 25px;
    }

    .buspool-content {
        left: 3% !important;
    }

    .buspool-content, .carpool-content { /*#our-products-content*/
        padding-right: 110px !important;
        padding-left: 10px !important;
        /*left: 5% !important;*/
    }

    .sharexpress-content {
        padding-left: 0px !important;
        right: -23% !important;
        /*padding-right: 338px !important;*/
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }
    
    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }
}

@media (max-width: 870px) {
    #about-us {
        top: 10% !important;
        padding-bottom: 400px !important;
        padding-top: 25px !important;
    }

    #about-us-content-1 {
        top: 35% !important; 
    }

    #about-us-content-2 {
        top: 35% !important;
    }
}

/* Landscape phones and portrait tablets (max 768px) */
@media (max-width: 768px) {
    h2 {
        font-size: 26px;
    }

    h3 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .banner > .item > img {
        width: 100%;
        display: block;
        max-height: 400px !important; /* 645 */
    }

    #about-us {
       top: 0% !important; 
       left: 0%; 
       width: 100%;
       padding-bottom: 350px !important;
       padding-top: 25px !important;
    }

    #about-us-content-1 {
        top: 25% !important; 
        left: 8% !important; 
        width: 40% !important;
        line-height: 25px;
    }

    #about-us-content-2 {
        top: 25% !important;
        left: 52% !important; 
        width: 40% !important;
        line-height: 25px;
    }

    .buspool-content, .carpool-content { /*#our-products-content*/
        padding-right: 80px !important; 
        padding-left: 0px !important;
        left: 5% !important;
    }

    .sharexpress-content {
        padding-left: 0px !important;
        right: -28% !important;
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }
}

@media (max-width: 690px) {
    #about-us {
        /*top: 12% !important;*/
    }

    .banner > .item > img {   
        height: 460px !important;
    }

    #about-us-content-1, #about-us-content-2 {
        top: 25% !important;
    }

    .sharexpress-content {
        padding-left: 0px !important;
        right: -28% !important;
        padding-right: 235px !important;       
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }

    .ourproducts > .item > img {
        height: 300px !important; /*270*/
    }
}

@media (max-width: 610px) {
    #about-us {
        top: -5% !important;
    }

    #about-us-content-1, #about-us-content-2 {
        top: 20% !important;
    }

    .sharexpress-content {
        padding-right: 205px !important;       
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }
}

@media (max-width: 555px) {
    #about-us {
        top: -8% !important;
        padding-bottom: 380px !important;
    }

    #about-us-content-1, #about-us-content-2 {
        top: 20% !important;
        line-height: 20px !important;
    }

    .sharexpress-content {
        padding-right: 195px !important;       
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
    h2 {
        font-size: 18px;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    h3 {
        font-size: 16px;
    }

    .banner > .item > img {
        width: 100%;
        display: block;
        height: 400px !important; /* 645 */
    }

    #about-us {
       top: -8% !important; 
       left: 0%; 
       width: 100%;
       padding-bottom: 400px !important;
       padding-top: 25px !important;
       font-size: 22px;
    }

    #about-us-content-1 {
        top: 14% !important; 
        left: 10% !important; 
        width: 80% !important;
        line-height: 18px !important;
        font-size: 15px !important;
    }

    #about-us-content-2 {
        top: 48% !important;
        left: 10% !important; 
        width: 80% !important;
        line-height: 18px !important;
        font-size: 15px !important;
    }

    .ourproducts > .item > img {
        height: 300px !important;
    }

    .buspool, .sharexpress, .carpool { /*#our-products*/
        top: 10% !important;
        left: 0% !important;
        line-height: 15px !important;
        text-align: center !important;
    }

    .buspool-content, .sharexpress-content { /*#our-products-content*/
        top: 35% !important;
        left: 10% !important;
        font-size: 15px !important;
        line-height: 30px !important;
        text-align: center !important;
    }

    .carpool-content {
        top: 25% !important;
        left: 10% !important;
        font-size: 15px !important;
        line-height: 30px !important;
        text-align: center !important;
    }

    .sharexpress-content {
        padding-right: 60px !important; /*60*/
        left: 7% !important;
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }

}

/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .banner > .item > img {
        width: 100%;
        display: block;
        height: 400px !important; /* 645 */
    }
    
    #about-us {
       padding-bottom: 370px !important;
    }

    #about-us-content-1 {
        top: 12% !important; 
        left: 10% !important; 
        width: 80% !important;
        line-height: 18px !important;
        font-size: 15px !important;
    }

    #about-us-content-2 {
        top: 50% !important;
        left: 10% !important; 
        width: 80% !important;
        line-height: 18px !important;
        font-size: 15px !important;
    }
    
    .ourproducts > .item > img {
        /*height: 250px !important;*/
    }

    .buspool, .sharexpress, .carpool { /*#our-products*/
        top: 5% !important;
        left: 0%;
    }

    .buspool-content, .sharexpress-content, .carpool-content { /*#our-products-content*/
        top: 25% !important;
        left: 13% !important;
    }

    .buspool > span, .buspool-content > span {
        background: rgba(0, 0, 0, 0.7);
    }

    .carpool > span, .carpool-content > span { 
        background: #546e7a;
        color: white !important;
    }

    .sharexpress > span, .sharexpress-content > span { 
        background: #fdd86c;
    }

    .sharexpress-content {
        padding-right: 60px !important;
        left: 8.5% !important;
    }

    .carpool-content {
        top: 20% !important;
        left: 0% !important;
        font-size: 15px !important;
        line-height: 30px !important;
        text-align: center !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}
h1, .h1 {
    font-size: 30px;
}

h2 {
    padding-top: 50px;
    padding-bottom: 50px;
}

h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.banner > .item > img {
    width: 100%;
    display: block;
    max-height: 645px; /* 575 */
    position: relative;
}

#aboutus {
   background-color: black;
   opacity: 0.7;
}

#about-us {
   text-align: center;
   position: absolute; 
   top: 36%; /*45*/
   left: 0%; 
   width: 100%;
   color: white;
   background-color: black;
   padding-bottom: 350px ;
   padding-top: 25px !important;
}

#about-us-content-1 {
    color: white;
    position: absolute;
    top: 55%; /*60*/
    left: 15%; 
    width: 34%;
    text-align: justify;
    line-height: 25px;
}

#about-us-content-2 {
    color: white;
    position: absolute;
    top: 55%; /*60*/
    left: 51%; 
    width: 34%;
    text-align: justify;
    line-height: 25px;
}

#founderdetails {
    color: #45b878;
    background-color: transparent;
    border-color: #45b878;
}

#founderdetails:hover {
    color: white;
    background-color: #45b878;
    border-color: #45b878;
}


#rowareyou {
    margin-top: -20px;
    margin-bottom: -10px;
}

#areyou {
    width: 100%;
    display: block;
    background-color: #45b878;
    color: white;
}

#rowourproducts {
    padding-right: 15px;
    padding-left: 15px;
}

#products-buspool, #products-sharexpress, #products-carpool {
    background-color: darkgray;
    color: black;
    cursor: pointer;
    font-weight: 200;
}

#products-buspool:hover, #products-buspool:active {
    background-color: #45b878;
    color: white;
    cursor: pointer;
    font-weight: 200;
}

.highlight-buspool {
    background-color: #45b878 !important;
    color: white !important;
}

#products-sharexpress:hover, #products-sharexpress:active {
    background-color: #00a1b7;
    color: white;
    cursor: pointer;
}

.highlight-sharexpress {
    background-color: #00a1b7 !important;
    color: white !important;
}

#products-carpool:hover, #products-carpool:active {
    background-color: #546e7a;
    color: white;
    cursor: pointer;
}

.highlight-carpool {
    background-color: #546e7a !important;
    color: white !important;
}

#buspool, #sharexpress, #carpool {
    color: black;
    text-decoration: none;
}

#buspool:hover, #buspool:active, #sharexpress:hover, #sharexpress:active, #carpool:hover, #carpool:active {
    color: white;
    text-decoration: none;
}

.ourproducts > .item > img {
    position: relative;
    height: 100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.buspool { 
   text-align: left;
   position: absolute; 
   top: 30%; 
   left: 5%; /*4*/
   width: 100%; 
   font-weight: 200;
   letter-spacing: 1px;  
}

.buspool > span, .buspool-content > span { 
   color: white; 
   letter-spacing: -1px;  
   /*background: rgb(0, 0, 0); 
   background: rgba(0, 0, 0, 0.7);*/
   padding: 5px 10px 5px 0px;
}

.buspool-content { /*#our-products-content*/
   text-align: left;
   font-size: 18px;
   position: absolute; 
   top: 47%; 
   left: -4.2%; /*-6*/ 
   width: 100%; 
   line-height: 30px;
   padding-right: 530px; /*80*/
   padding-left: 115px; /*115*/
   letter-spacing: 1px;  
}

.sharexpress { 
   text-align: right;
   position: absolute; 
   top: 30%; 
   right: 8%; /*8*/
   width: 100%; 
}

.sharexpress > span, .sharexpress-content > span { 
   color: black; 
   letter-spacing: -0.75px;  
   /*background: rgb(0, 0, 0); 
   background: #fdd86c;*/
   padding: 5px 10px 5px 10px; 
}

.sharexpress-content { /*#our-products-content*/
   text-align: right;
   font-size: 18px;
   position: absolute; 
   top: 47%; 
   right: -15%; 
   width: 100%; 
   line-height: 30px;
   padding-right: 283px; /*270*/
   padding-left: 370px;
}

.carpool { 
   text-align: center;
   position: absolute; 
   top: 10%; 
   left: 0%; 
   width: 100%; 
}

.carpool > span, .carpool-content > span { 
   color: black; 
   letter-spacing: -1px;  
   /*background: rgb(0, 0, 0); 
   background: #546e7a;*/
   padding: 5px 10px 5px 10px;
}

.carpool-content { /*#our-products-content*/
   text-align: center;
   font-size: 18px;
   position: absolute; 
   top: 27%; 
   left: 7%; 
   width: 100%; 
   line-height: 30px;
   padding-right: 270px; /*80*/
   padding-left: 130px;
}

#ourproducts, #aboutbanner {
    width: 100%;
    display: block;
    background-size: cover;
}

