﻿.passenger-container {
}


.text-contanier {
    position: fixed;
    color: white;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 25px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: 18px;
    z-index:2;
}


@media screen and (min-height: 1001px) {
    .text-contanier h4, .text-contanier h4 li {
        font-size: 17px;
    }
}

@media screen and (min-height: 801px) {
    .passenger-container {
        height: 800px;
    }

    .text-contanier h4, .text-contanier h4 li {
        font-size: 15px;
    }
}

@media screen and (max-height: 800px) and (min-height: 641px) {
    .passenger-container {
        height: 600px;
    }

    .text-contanier h4, .text-contanier ul{
        font-size: 13px;
    }
}


@media screen and (max-height: 640px) {
    .passenger-container {
        height: 400px;
    }

    .text-contanier h4,  .text-contanier ul{
        font-size: 12px;
    }
}


@media screen and (max-height: 400px) {
    .text-contanier h4,  .text-contanier ul{
        font-size: 10px;
    }
}

@media screen and (max-height: 360px) {
    .text-contanier h4, .text-contanier ul {
        font-size: 9px;
    }
     .text-contanier {
        top: 60%!important;
    }
}

@media screen and (max-width: 990px) {
    .about-us-info {
        margin-top: 0 !important;
    }
}

.row {
    max-width: 810px;
    margin-left: auto;
    margin-right: auto;
}



.taxi-icon-ruller {
    height: 30px;
    width: 91px;
    position: fixed;
    left: 50%;
    z-index: 20;
    transform: translate(-40%, 0%);
}

.taxi-icon-ruller-inner-span {
    height: 15px;
    width: 15px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 3px;
    background-color: #546e7a;
    cursor: pointer;
    opacity: 0.56;
}

    .taxi-icon-ruller-inner-span:hover {
        opacity: 1;
        box-shadow: rgb(255, 255, 255) 0px 0px 4px;
    }


.taxi-icon-ruller-selected {
    opacity: 1;
    box-shadow: rgb(255, 255, 255) 0px 0px 4px;
}

.driver-ruller .taxi-icon-ruller-inner-span {
    background-color: #009688;
}

.bottom-span {
    position: relative;
    top: 12px;
}

@media screen and (min-width: 768px) {
    .container {
        padding-top: 60px;
    }

    .taxi-icon-ruller {
        bottom: 25%;
    }
}


@media screen and (max-width: 767px) {
    .container {
        padding-top: 30px;
    }

    .taxi-icon-ruller {
        bottom: 12%;
    }
}

.passenger-base-phone-div {
    position: fixed;
    top: 46%;
    left: 63%;
    z-index: 3;
    width: 250px;
    height: 500px;
}


@media screen and (min-width: 1201px) {
    .passenger-base-phone-div {
        transform: translate(-40%, -50%);
        -ms-transform: translate(-40%, -50%);
        -webkit-transform: translate(-40%, -50%);
        -moz-transform: translate(-40%, -50%);
        -o-transform: translate(-40%, -50%);
    }

    .text-contanier {
        width: 510px;
        top: 45%;
        left: 38%;
        max-width: 30%;
    }
}


@media screen and (max-width: 1200px) and (min-width: 991px) {
    .passenger-base-phone-div {
        transform: translate(-15%, -50%);
        -ms-transform: translate(-15%, -50%);
        -webkit-transform: translate(-15%, -50%);
        -moz-transform: translate(-15%, -50%);
        -o-transform: translate(-15%, -50%);
    }

    .text-contanier {
        top: 45%;
        left: 38%;
        max-width: 30%;
    }
}

@media screen and (max-width: 990px) {
    .passenger-base-phone-div {
        transform: translate(20%, -50%);
        -ms-transform: translate(20%, -50%);
        -webkit-transform: translate(20%, -50%);
        -moz-transform: translate(20%, -50%);
        -o-transform: translate(20%, -50%);
    }

    .text-contanier {
        width: 510px;
        top: 45%;
        left: 38%;
        max-width: 60%;
        padding: 10px;
    }
}

@media screen and (max-width: 550px) {
    .text-contanier {
        padding: 7px;
        width: 510px;
        top: 50%;
        left: 38%;
        max-width: 70%;
    }

        .text-contanier ul {
            margin-left: -15px;
            font-size:10px;
        }
}

.passenger-base-phone {
    position: absolute;
    z-index: 2;
    width: 250px;
}

.passenger-base-app-phone, .driver-base-app-phone {
    position: absolute;
    top: 46.9%;
    left: 50.1%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 213px;
    z-index: -3;
    height: 378px;
    background-size: cover;
    background-position-y: 0;
}

.passenger-order {
    background-image: url('/Content/Images/bg_passenger_order.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.passenger-order-container-image {
    display: block;
    background-image: url('/Content/Images/bg_07png.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    text-align: center;
    z-index: -1;
    position: absolute;
}

.passenger-order {
    background-image: url('/Images/Passenger/bg_passenger_order.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.passenger-install {
    margin-top: -13px;
    background-image: url('/Images/Passenger/bg_passenger_app.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.passenger-registration {
    background-image: url('/Images/Passenger/bg_passenger_reg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.passenger-trip {
    background-image: url('/Images/Passenger/bg_passenger_trip.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.passenger-feedback {
    background-image: url('/Images/Passenger/bg_passenger_feed.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.driver-order {
    background-image: url('/Images/Driver/orderpng.png');
    background-position: center;
    color: white;
    text-align: center;
    position: relative;
}

.driver-registration {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/Images/Driver/registration_dr.jpg');
}

.driver-install {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/Images/Driver/instal_dr.jpg');
}

.driver-order {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/Images/Driver/order_dr.jpg');
}

.driver-trip {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/Images/Driver/trip_dr.jpg');
}


.driver-income {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/Images/Driver/income_dr.jpg');
}


.passenger-header {
    display: inline-block;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.45);
}

    .passenger-header .navbar-collapse {
        margin: auto;
    }

    .passenger-header .headerAM {
        width: 603px;
    }

    .passenger-header .headerRU {
        width: 560px;
    }

    .passenger-header .headerEN {
        width: 514px;
    }

    .passenger-header .navbar-collapse ul li a:hover {
        color: #546e7a;
    }

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    @media {
        .passenger-header .headerRU {
            width: 555px;
        }
    }
}


.hidden-fields {
    display: none;
}
