header { background-color: #FFF; }

header a.logo { display: inline-block; }

header a.logo img { width: 230px; }

header nav a {
    padding: 0 10px;
    text-decoration: none;
    font-weight: bold;
}

header .userbar .mgAutopark {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background-color: #0b4887;
    cursor: pointer;
}

header .userbar .mgOffers {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background-color: #CCC;
}

header .userbar .mgLanguages {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background-color: #0b4887;
    cursor: pointer;
}

header .userbar .mgLanguages strong {
    display: inline-block;
    color: #FFF;
    text-transform: uppercase;
    padding: 9px 10px;
    line-height: 15px;
}

header .userbar a.olink {
    /*line-height: 12px;*/
    vertical-align: top;
    display: inline-block;
    padding: 9px 20px 9px 30px;
    color: #FFF;
    /*border-right: 2px solid #FFF;*/

    background-image: url(../svg/offer.svg);
    background-repeat: no-repeat;
    background-position: 5px 3px;
    background-size: 26px 26px;
}

header .userbar a.alink {
    vertical-align: top;
    display: inline-block;
    padding: 9px 20px 9px 35px;
    color: #FFF;
    background-image: url(../svg/car.svg);
    background-repeat: no-repeat;
    background-position: 5px 3px;
    background-size: 26px 26px;
    position: relative;
}

header .userbar a.red {
    font-weight: bold;
    color: red;
}

header .mgAutopark div,
header .mgLanguages div {
    display: none;
    position: absolute;
    padding: 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #d1d1d1;
    border-bottom: 2px solid #d1d1d1;
}

header .mgLanguages div { right: 0; }

header .mgAutopark div a,
header .mgLanguages div a {
    display: block;
    padding: 5px 10px 5px 20px;
    background-image: url(../svg/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 10px 10px;
}

header .mgAutopark div a:hover,
header .mgLanguages div a:hover {
    background-color: #0b4887;
    color: #FFF;
}

header .mgAutopark:hover div,
header .mgLanguages:hover div {
    display: block;
}

header .userbar .mgOffers.active { background-color: #0b4887; }

@media all and (min-width: 961px) {

    header a.logo {
       /* padding: 26px 10px;*/
        padding: 10px;
        vertical-align: middle;
        margin-right: 40px;
    }

    header .banner {
        display: inline-block;
        vertical-align: middle;
        padding: 2px;
    }

    header .userbar {
        color: #616161;
        background-color: #f8f8f8;
        border-bottom: 1px solid #d1d1d1;
        display: flex;
        justify-content: space-between;
    }

/*    header .userbar button,
    header .userbar input {
        margin: 0 10px 0 2px;
    }*/
/*    header .userbar input {
        margin-right: 10px;
    }*/

   /* header .userbar .mgUser { float: left; }*/

    header .userbar .mgUser .mgSelect { display: inline-block; }
    header .userbar .mgUser .mgSelect a { white-space: nowrap; }

    header .userbar .mgUser .close {
        background-color: red;
        width: 16px;
        height: 16px;
        display: inline-block;
        cursor: pointer;
        padding: 0;
        border-radius: 4px;
        position: relative;
        vertical-align: middle;
        margin-left: 5px;
    }

    header .userbar .mgUser .close hr {
        border: none;
        width: 8px;
        height: 2px;
        background-color: #FFF;
        position: absolute;
        top: 1px;
        left: 4px;
        border-radius: 1px;
    }

    header .userbar .mgUser .close hr:first-child {
        transform: rotate(45deg);
    }

    header .userbar .mgUser .close hr:last-child {
        transform: rotate(-45deg);
    }



    header .userbar .mgUser form { padding: 3px; }

    header .userbar .mgUser span {
        display: inline-block;
        padding-left: 7px;
        padding-right: 3px;
    }

    header .userbar .mgUser a.user {
        background-color: #008adb;
        color: #FFF;
        text-decoration: none;
        padding: 0 15px 0 30px;
        display: inline-block;
        line-height: 32px;
        background-image: url(../svg/user.svg);
        background-repeat: no-repeat;
        background-position: 5px center;
        background-size: 20px 20px;
    }

    header .userbar .mgUser a.user:hover { background-color: #0b4887; }

    header .userbar .mgBasket {
        /*float: right;*/
        background-color: #CCC;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    header .userbar .mgBasket.active {
        background-color: #0b4887;
    }

    header .userbar .mgBasket a.blink {
        display: inline-block;
        color: #FFF;
        background-image: url(../svg/basket.svg);
        background-repeat: no-repeat;

        background-position: 4px 4px;
        background-size: 26px 26px;
        padding: 9px 20px 9px 30px;
    }

    header .userbar .mgBasket.active a.blink  { cursor: pointer; }

/*    header .userbar .mgBasket a.olink {
        display: inline-block;
        color: #FFF;
        background-image: url(../svg/offer.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 26px 26px;
        height: 29px;
        width: 45px;
        border-right: 2px solid #f8f8f8;
    }*/

    header .userbar .mgBasket em,
    header .userbar .mgOffers em {
        font-style: normal;
        background-color: #ff6600;
        border-radius: 9px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        width: 18px;
        position: absolute;
        top: 3px;
        right: 3px;
        pointer-events: none;
    }

    header nav {
        border-top: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
    }

    header nav a {
        color: #0b4887;
        display: inline-block;
        line-height: 32px;
    }

    header nav a:not(.disabled):hover {
        background-color: #0b4887;
        color: #FFF;
    }

    header nav a:first-child {
        padding-left: 35px;
        background-image: url(../svg/catalog.svg);
        background-repeat: no-repeat;
        background-position: 5px center;
        background-size: 32px 32px;
        width: 100px;
        margin-right: 180px;
        box-sizing: border-box;
    }

    header nav a.disabled {
        color: #AAA;
    }

    header nav a.akciq {
        line-height: 24px;
    }

    header .mgE { display: none; }

}

    /*PROMENI*/

/*@media all and (min-width: 1051px){
    header nav a {
        padding: 0 10px;
    }
}
@media all and (max-width: 1050px){
    header nav a { padding: 0 5px; }
}*/

    /*PROMENI - END*/

@media all and (max-width: 960px) {

    /*html { background-color: #0b4887; }*/

    body {
        position: relative;
        left: 0;
        transition: left .5s ease;
        /* padding-top: 60px;   header height */
        background-color: #FFF;
        box-shadow: 5px 0 10px rgba(0,0,0,0.1);
    }

    body.left {
        left: -260px; /* right nav width */
        overflow-x: hidden;
    }

    header a.logo { padding: 10px; }

    header .banner {
        display: none;
    }

    header .userbar { display: none; }

    header nav {
        box-sizing: border-box;
        padding: 10px;
        display: none;
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        right: -260px;
        width: 260px;
        top: 0;
        bottom: 0;
        transition: right .5s ease;
        background-color: #0b4887;
    }

    header nav a {
        color: #FFF;
        display: block;
        text-align: left;
        padding: 10px;
        margin-bottom: 2px;
        text-decoration: none;
    }

    header nav a.current,
    header nav a:hover {
        background-color: #008adb;
        border-radius: 2px;
    }

    body.left nav {
        display: block;
    }


/*    header nav.show {
        display: block;
    }*/

    header .mgE {
        float: right;
        display: block;
        width: 30px;
        height: 30px;
        padding: 15px;
        cursor: pointer;
        position: relative;
        /*background-color: #EEE;*/
    }

    header .mgE hr {
        border: none;
        margin: 0;
        position: absolute;
        width: 30px;
        height: 3px;
        border-radius: 2px;
        background-color: #0b4887;
        transition: all .25s ease;
    }

    header .mgE hr {
        top: 29px;
    }

    header .mgE hr:first-child {
        top: 21px;
    }

    header .mgE hr:last-child {
        top: 37px;
    }

    header .mgE.show hr:first-child,
    header .mgE.show hr:last-child {
        width: 0;
        top: 15px;
        margin: 15px;
        opacity: 0;
    }

    header .mgE.show hr:nth-child(2) {
        transform: rotate(45deg);
    }

    header .mgE.show hr:nth-child(3) {
        transform: rotate(-45deg);
    }

    section.mobile .mgUser {
        background-color: #f8f8f8;
        padding: 10px;
    }

    section.mobile .mgUser a.user {
        background-color: #008adb;
        color: #FFF;
        text-decoration: none;
        padding: 0 15px 0 30px;
        display: inline-block;
        line-height: 30px;
        background-image: url(../svg/user.svg);
        background-repeat: no-repeat;
        background-position: 5px center;
        background-size: 20px 20px;
    }
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    section.mobile .mgUser a.user {
        /*font-size: 18px;*/
        line-height: 38px;
        padding: 0 25px 0 40px;
        background-position: 5px center;
        background-size: 30px 30px;
    }
}

header #objectPhone {
    float: right;
    margin: 18px;
    color: #0b4887;
    font-size: 14px;
}

header #objectPhone a {
    color: #0b4887;
    font-size: 22px;
    font-weight: bold;   
}