@import 'fonts.css';

* {
    box-sizing: content-box;
}
html, body {
    position: relative;
}

body {
    color: #4c4848;
}

.container {
    max-width: 615px;
    padding: 0 10px;
    margin: 0 auto;
}
.image-logo {
    display: inline-block;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    margin-top: 45px;
}

.image-logo img {
    height: 48px;
}

.wrap-counters {
    min-height: 356px;
    position: relative;
    border: solid 3px #0053a1;
    border-top-right-radius: 2em;

}
.wrap-counters:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -80px;
    width: 80px;
    height: 293px;
    background: url('vectos/bg.png');
    background-repeat:  no-repeat;
    background-size:  contain;
}
#counter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

#counter > div {
    height: 94px;
    width: 100%;
    background-position: right center;
    background-size: contain;
    margin: 17px 0 17px 0;
    display: table;

}

.wrap-counter .counters {
    width: 169px;
    background: url(vectos/bg-counter.png) no-repeat;
    background-size: initial;
    height: 40px;
}
.wrap-counter .counters .content-counter{
    font-size: 28px;
    font-weight: 900;
    font-family: "Avenir LT W01_95 Black1475556";
    letter-spacing: 0.78rem;
    text-align: right;
    line-height: 40px;
    position: relative;
    left: 5px;
}

.wrap-counter {
    display: table-cell;
    vertical-align: middle;
    padding-left: 9%;
}

.wrap-counter span{
    display: inline-block;
}

.wrap-counter .keys {
    font-size: 20px;
    font-weight: 500;
    font-family: "Avenir LT W01_35 Light1475496";
    text-align: left;
    color: #4c4848;
    min-width: 30%;
    padding-left: 20px;
}
.wrap-counter .unity {
    font-size: 16px;
    font-weight: 900;
    font-family: "Avenir LT W01_95 Black1475556";
}

.image-gnv {
    margin: 0 auto;
    display: inline-block;
    border: solid 3px #0053a1;
    border-top-right-radius: 1em;
    border-top-left-radius: 1em;
    overflow: hidden;
    margin-bottom: -7px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.image-gnv img {
    overflow: hidden;
    padding: 8px 39px 7px 39px;
    display: block;
}

p  {
    font-family: "Avenir LT W01_55 Roman1475520";
}
.text p {
    margin: 25px auto;
    font-size: 17px;
    line-height: 1.41;
    text-align: center;

}

.bottom-text {
    text-align: right;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: 13px;
    line-height: 1.38;
    color: #9c9e9f;
}

.car .nox {
    background: url('vectos/car-nox.png') no-repeat;
}
.car .co2 {
    background: url('vectos/car-co2.png') no-repeat;
}
.car .pm {
    background: url('vectos/car-pm.png') no-repeat;
}

.lorry .nox {
    background: url('vectos/lorry-nox.png') no-repeat;
}
.lorry .co2 {
    background: url('vectos/lorry-co2.png') no-repeat;
}
.lorry .pm {
    background: url('vectos/lorry-pm.png') no-repeat;
}

.bus .nox {
    background: url('vectos/bus-nox.png') no-repeat;
}
.bus .co2 {
    background: url('vectos/bus-co2.png') no-repeat;
}
.bus .pm {
    background: url('vectos/bus-pm.png') no-repeat;
}

.collectivity .wrap-counters:before {
    background: url('vectos/collectivity-bg.png');
}
.collectivity .image-gnv, .collectivity .wrap-counters {
    border-color: #0c9fc7;
}


@media (max-width: 640px) {
    .wrap-counter .keys {
        min-width: 26%;
    }
    .wrap-counter {
        padding-left: 4%;
    }
}

@media (max-width: 480px) {
    .bottom-text {
        text-align: left;
    }
    .wrap-counters:before {
         display: none;
    }
    .nox, .co2, .pm {
        background-size: auto 60% !important;
    }
    .wrap-counter .keys {
        display: block;
    }
}