@font-face {
    font-family: 'Glyphicons';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/akfont.eot'); /* IE9 Compat Modes */
    src: local('glyphicon'), local('glyphicon'),
        url('../fonts/akfont.eot') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/akfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/akfont.woff') format('woff'), /* Modern Browsers */
        url('../fonts/akfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/akfont.svg') format('svg'); /* Legacy iOS */
    font-display: swap;
}

header .nav a.icon {
    text-transform: uppercase;
    display: inline-block;
}

a.icon {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    vertical-align: top;
}

a.icon i {
    display: inline-block;
    text-align: center;
    padding: 5px 10px;
    vertical-align: top;
}

a.icon span {
    vertical-align: top;
    line-height: 33px;
}

header .nav a.icon i {
    color: #999;
    width: 25px;
    height: 25px;
}

header .nav a.icon:hover i,
header .nav  a.icon.current i { color: #000; }

a.icon i::before {
    font-family: 'Glyphicons';
    font-style: normal;
    text-transform: none;
    font-weight: normal;
}

a.icon i::before {
    font-size: 28px;
    line-height: 25px;
}

a.icon.car i::before {
    content: "\e62b";
}

a.icon.workshop i::before {
    content: "\e634";
}

a.icon.mygarage i::before {
    content: "\e602";
}

a.icon.search i::before {
    content: "\f002";
}

a.icon.truck i::before {
    content: "\e627";
}

a.icon.moto i::before {
    content: "\e629";
}

a.icon.shine i::before {
    content: "\e922";
}

a.icon.clothes i::before {
    content: "\e636";
}

a.icon.paperclip i::before {
    content: "\f0c6";
}

a.icon.tshirt i::before {
    content: "\e63a";
}

a.icon.news i::before {
    content: "\e638";
}

a.icon.scooter i::before {
    content: "\e62a";
}

a.icon.package i::before {
    content: "\e930";
}

a.icon.karavan i::before {
    content: "\e95e";
}

a.icon.details i::before {
    content: "\e95d";
}

a.icon.cutlery i::before {
    content: "\e963";
}

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

    header .nav {
        background-color: #EEE;
        height: 50px;
    }

    header nav a.icon span { display: none; }

    header nav a.icon:hover,
    header nav a.icon.current {
        background-color: #F8F8F8;
    }
}

/* Desktop */
@media all and (min-width: 961px) {
    header nav a.icon {
        border-top: 2px solid transparent;
        padding: 14px 10px 10px 0;
    }

    header nav a.icon:hover,
    header nav a.icon.current {
        background-color: #F8F8F8;
        border-top: 2px solid yellow;
    }

    header nav a.icon span { line-height: 36px; }
}

@media all and (min-width: 961px) and (max-width: 1160px) {
    header nav a.icon { padding: 14px 10px 10px 10px; }
    header nav a.icon i { display: none; }
}