#rs-demo-id {}

:root {
    /* Monitor */
    --button-width-monitor: 100px;
    --button-height-monitor: 110px;
    --button-width-monitor-caption: 250px;
    --button-width-monitor-spacer: 2px;
    --button-width-monitor-over: 352px; /* caption + spacer + img */
    --font-size-monitor: 17px;

    /* Laptop */
    --button-width-laptop: 80px;
    --button-height-laptop: 90px;
    --button-width-laptop-caption: 270px; /* TODO: -40px */
    --button-width-laptop-spacer: 2px;
    --button-width-laptop-over: 372px; /* caption + spacer + img */
    --font-size-laptop: 14px;

    /* Tablet */
    --button-width-tablet: 40px;
    --button-height-tablet: 50px;
    --button-width-tablet-caption: 130px;
    --button-width-tablet-spacer: 2px;
    --button-width-tablet-over: 332px; /* caption + spacer + img */
    --font-size-tablet: 10px;

    /* Cellphone */
    --button-width-cellphone: 20px;
    --button-height-cellphone: 30px;
    --button-width-cellphone-caption: 110px;
    --button-width-cellphone-spacer: 2px;
    --button-width-cellphone-over: 312px; /* caption + spacer + img */
    --font-size-cellphone: 8px;


    /* Semitransparent black color */
    --base-color: rgba(0, 0, 0, 0.5);

    --ferry-color: #628fbc;
    --train-color: #99b18b;
    --tunnels-color: #aea798;
    --eurotunnel-color: #d18812;
    --bridges-color: #977a73;
    --tolls-color: #4bc3b4;
    --fuelcard-color: #5fe5f5;
    --trucking-color: #b1ab4f;
    --customer-color: #a93536;

    --neon-color: #009ca6;
    /* maybe */
    --header-color: #f96400;
}



.tab-over {
    height: 160px;
    width: 590px;
}

.tab-main {
    height: 0px;
    width: 0px;
}

.tab-normal {
    width: 100px;
    background-color: var(--base-color);
    margin-right: 2px;
    position: relative;
}

/* FERRY SERVICES **Monitor** */

.tab-ferry-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-ferry-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/01ferry.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}


.tab-ferry-monitor-over {
    display: flex;
    /* caption + spacer + img */
    min-width: var(--button-width-monitor-over);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-ferry-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-ferry-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--ferry-color);
    pointer-events: none;
    z-index: 1;
}

.tab-ferry-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--ferry-color);
    background-image: url('../images/01ferry.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* FERRY SERVICES **Laptop** */

.tab-ferry-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-ferry-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/01ferry.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}


.tab-ferry-laptop-over {
    display: flex;
    /* caption + spacer + img */
    min-width: var(--button-width-laptop-over);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-ferry-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-ferry-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--ferry-color);
    pointer-events: none;
    z-index: 1;
}

.tab-ferry-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--ferry-color);
    background-image: url('../images/01ferry.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* FERRY SERVICES **Tablet** */

.tab-ferry-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-ferry-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/01ferry.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}


.tab-ferry-tablet-over {
    display: flex;
    /* caption + spacer + img */
    min-width: var(--button-width-tablet-over);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-ferry-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-ferry-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--ferry-color);
    pointer-events: none;
    z-index: 1;
}

.tab-ferry-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--ferry-color);
    background-image: url('../images/01ferry.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* TRAIN SERVICES **Monitor** */

.tab-train-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-train-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/02train.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}


.tab-train-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-train-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-train-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--train-color);
    pointer-events: none;
    z-index: 1;
}

.tab-train-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--train-color);
    background-image: url('../images/02train.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* TRAIN SERVICES **Laptop** */

.tab-train-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-train-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/02train.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}


.tab-train-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-train-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-train-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--train-color);
    pointer-events: none;
    z-index: 1;
}

.tab-train-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--train-color);
    background-image: url('../images/02train.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* TRAIN SERVICES **Tablet**  */

.tab-train-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-train-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/02train.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}


.tab-train-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-train-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-train-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--train-color);
    pointer-events: none;
    z-index: 1;
}

.tab-train-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--train-color);
    background-image: url('../images/02train.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* TUNNELS SERVICES **Monitor** */

.tab-tunnels-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-tunnels-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/03tunnels.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}


.tab-tunnels-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-tunnels-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-tunnels-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--tunnels-color);
    pointer-events: none;
    z-index: 1;
}

.tab-tunnels-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--tunnels-color);
    background-image: url('../images/03tunnels.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* TUNNELS SERVICES **Laptop** */

.tab-tunnels-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-tunnels-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/03tunnels.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}


.tab-tunnels-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-tunnels-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-tunnels-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--tunnels-color);
    pointer-events: none;
    z-index: 1;
}

.tab-tunnels-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--tunnels-color);
    background-image: url('../images/03tunnels.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* TUNNELS SERVICES **Tablet**  */

.tab-tunnels-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-tunnels-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/03tunnels.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}


.tab-tunnels-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-tunnels-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-tunnels-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--tunnels-color);
    pointer-events: none;
    z-index: 1;
}

.tab-tunnels-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--tunnels-color);
    background-image: url('../images/03tunnels.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* EUROTUNNEL **Monitor** */

.tab-eurotunnel-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-eurotunnel-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/04eurotunnel.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}


.tab-eurotunnel-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-eurotunnel-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-eurotunnel-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--eurotunnel-color);
    pointer-events: none;
    z-index: 1;
}

.tab-eurotunnel-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--eurotunnel-color);
    background-image: url('../images/04eurotunnel.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* EUROTUNNEL **Laptop** */

.tab-eurotunnel-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-eurotunnel-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/04eurotunnel.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}

.tab-eurotunnel-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-eurotunnel-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}


.tab-eurotunnel-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--eurotunnel-color);
    pointer-events: none;
    z-index: 1;
}

.tab-eurotunnel-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--eurotunnel-color);
    background-image: url('../images/04eurotunnel.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* EUROTUNNEL **Tablet** */

.tab-eurotunnel-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-eurotunnel-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/04eurotunnel.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}


.tab-eurotunnel-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-eurotunnel-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-eurotunnel-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--eurotunnel-color);
    pointer-events: none;
    z-index: 1;
}

.tab-eurotunnel-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--eurotunnel-color);
    background-image: url('../images/04eurotunnel.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* BRIDGES **Monitor** */

.tab-bridges-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-bridges-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/05bridges.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}

.tab-bridges-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-bridges-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-bridges-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--bridges-color);
    pointer-events: none;
    z-index: 1;
}

.tab-bridges-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--bridges-color);
    background-image: url('../images/05bridges.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* BRIDGES **Laptop** */

.tab-bridges-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-bridges-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/05bridges.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}

.tab-bridges-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-bridges-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-bridges-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--bridges-color);
    pointer-events: none;
    z-index: 1;
}

.tab-bridges-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--bridges-color);
    background-image: url('../images/05bridges.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* BRIDGES **Tablet** */

.tab-bridges-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-bridges-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/05bridges.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}

.tab-bridges-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-bridges-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-bridges-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--bridges-color);
    pointer-events: none;
    z-index: 1;
}

.tab-bridges-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--bridges-color);
    background-image: url('../images/05bridges.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* TOLLS **Monitor** */

.tab-tolls-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-tolls-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/06tolls.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}

.tab-tolls-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-tolls-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-tolls-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--tolls-color);
    pointer-events: none;
    z-index: 1;
}

.tab-tolls-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--tolls-color);
    background-image: url('../images/06tolls.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* TOLLS **Laptop** */

.tab-tolls-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-tolls-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/06tolls.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}

.tab-tolls-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-tolls-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-tolls-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--tolls-color);
    pointer-events: none;
    z-index: 1;
}

.tab-tolls-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--tolls-color);
    background-image: url('../images/06tolls.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* TOLLS **Tablet** */

.tab-tolls-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-tolls-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/06tolls.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}

.tab-tolls-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-tolls-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-tolls-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--tolls-color);
    pointer-events: none;
    z-index: 1;
}

.tab-tolls-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--tolls-color);
    background-image: url('../images/06tolls.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* fuelcard **Monitor** */

.tab-fuelcard-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-fuelcard-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/07fuelcard.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}

.tab-fuelcard-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-fuelcard-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-fuelcard-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--fuelcard-color);
    pointer-events: none;
    z-index: 1;
}

.tab-fuelcard-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--fuelcard-color);
    background-image: url('../images/07fuelcard.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* fuelcard **Laptop** */

.tab-fuelcard-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-fuelcard-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/07fuelcard.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}

.tab-fuelcard-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-fuelcard-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-fuelcard-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--fuelcard-color);
    pointer-events: none;
    z-index: 1;
}

.tab-fuelcard-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--fuelcard-color);
    background-image: url('../images/07fuelcard.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* fuelcard **Tablet** */

.tab-fuelcard-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-fuelcard-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/07fuelcard.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}

.tab-fuelcard-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-fuelcard-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-fuelcard-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--fuelcard-color);
    pointer-events: none;
    z-index: 1;
}

.tab-fuelcard-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--fuelcard-color);
    background-image: url('../images/07fuelcard.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}


/* TRUCKING SERVICES **Monitor** */

.tab-trucking-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-trucking-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/07trucking.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}

.tab-trucking-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-trucking-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-trucking-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--trucking-color);
    pointer-events: none;
    z-index: 1;
}

.tab-trucking-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--trucking-color);
    background-image: url('../images/07trucking.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
    z-index: 1;
}

/* TRUCKING SERVICES **Laptop** */

.tab-trucking-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-trucking-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/07trucking.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}

.tab-trucking-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-trucking-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-trucking-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--trucking-color);
    pointer-events: none;
    z-index: 1;
}

.tab-trucking-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--trucking-color);
    background-image: url('../images/07trucking.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
    z-index: 1;
}

/* TRUCKING SERVICES **Tablet** */

.tab-trucking-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-trucking-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/07trucking.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}

.tab-trucking-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-trucking-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-trucking-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--trucking-color);
    pointer-events: none;
    z-index: 1;
}

.tab-trucking-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--trucking-color);
    background-image: url('../images/07trucking.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
    z-index: 1;
}

/* CUSTOMER SERVICES **Monitor** */

.tab-customer-monitor {
    display: flex;
    min-width: var(--button-width-monitor);
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
}

.tab-customer-monitor .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background-color: var(--base-color);
    background-image: url('../images/08customer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-monitor) var(--button-height-monitor);
    pointer-events: none;
}

.tab-customer-monitor-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-monitor);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-customer-monitor-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-monitor-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-customer-monitor-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor-caption);
    font-size: var(--font-size-monitor);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-monitor);
    background: var(--customer-color);
    pointer-events: none;
    z-index: 1;
}

.tab-customer-monitor-over .img {
    flex: 0 1 auto;
    height: var(--button-height-monitor);
    width: var(--button-width-monitor);
    background: var(--customer-color);
    /*background-image: url('/greca.gr/public/customer.png');*/
    background-image: url('../images/08customer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* var(--button-width-monitor) var(--button-height-monitor); */
    pointer-events: none;
    z-index: 1;
}

/* CUSTOMER SERVICES **Laptop** */

.tab-customer-laptop {
    display: flex;
    min-width: var(--button-width-laptop);
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
}

.tab-customer-laptop .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background-color: var(--base-color);
    background-image: url('../images/08customer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-laptop) var(--button-height-laptop);
    pointer-events: none;
}

.tab-customer-laptop-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-laptop);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-customer-laptop-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-laptop-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-customer-laptop-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop-caption);
    font-size: var(--font-size-laptop);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-laptop);
    background: var(--customer-color);
    pointer-events: none;
    z-index: 1;
}

.tab-customer-laptop-over .img {
    flex: 0 1 auto;
    height: var(--button-height-laptop);
    width: var(--button-width-laptop);
    background: var(--customer-color);
    /*background-image: url('/greca.gr/public/customer.png');*/
    background-image: url('../images/08customer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* var(--button-width-laptop) var(--button-height-laptop); */
    pointer-events: none;
    z-index: 1;
}

/* CUSTOMER SERVICES **Tablet** */

.tab-customer-tablet {
    display: flex;
    min-width: var(--button-width-tablet);
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
}

.tab-customer-tablet .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background-color: var(--base-color);
    background-image: url('../images/08customer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--button-width-tablet) var(--button-height-tablet);
    pointer-events: none;
}

.tab-customer-tablet-over {
    display: flex;
    min-width: 577px;
    /* caption + spacer + img */
    min-height: var(--button-height-tablet);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.tab-customer-tablet-over .spacer {
    flex: 0 1 auto;
    min-width: var(--button-width-tablet-spacer);
    pointer-events: none;
    z-index: 1;
}

.tab-customer-tablet-over .caption {
    flex: 0 1 auto;
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet-caption);
    font-size: var(--font-size-tablet);;
    text-align: center;
    vertical-align: middle;
    line-height: var(--button-height-tablet);
    background: var(--customer-color);
    pointer-events: none;
    z-index: 1;
}

.tab-customer-tablet-over .img {
    flex: 0 1 auto;
    height: var(--button-height-tablet);
    width: var(--button-width-tablet);
    background: var(--customer-color);
    /*background-image: url('/greca.gr/public/customer.png');*/
    background-image: url('../images/08customer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* var(--button-width-tablet) var(--button-height-tablet); */
    pointer-events: none;
    z-index: 1;
}

/*  */

/* tabs container */
.rev_slider_wrapper_center_items {
    text-align: center;
}

.my-slider-tabs {
    position: absolute;
    width: 100%;
    display: block;
    bottom: 70px;
    z-index: 9999;
    overflow-x: hidden;
    justify-content: center;
    align-items: center;
}

/* individual tabs */
.my-slider-tabs span {
    /* min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor); */

    display: inline-block;
    text-align: center;
    cursor: pointer;

    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #FFF;

    /* top and bottom spacing for tab text */
    /*padding: 20px 0 15px 0; */

    /*background-color: #000; /* IE8 fallback */
    /*background-color: rgba(0, 0, 0, 0.5); */

    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    transition: background-color 0.4s ease-out;

    vertical-align: top;

    padding-right: 2px;
}

.my-slider-tabs-monitor span {
    min-height: var(--button-height-monitor);
    min-width: var(--button-width-monitor);
}

.my-slider-tabs-laptop span {
    min-height: var(--button-height-laptop);
    min-width: var(--button-width-laptop);
}

.my-slider-tabs-tablet span {
    min-height: var(--button-height-tablet);
    min-width: var(--button-width-tablet);
}

.my-slider-tabs-cellphone span {
    min-height: var(--button-height-cellphone);
    min-width: var(--button-width-cellphone);
}

/* active tab styles */
.my-slider-tabs span.tab-active {

    /* normal cursor for active tab */
    cursor: auto;

    /* colored line for active tab */
    /*border-top: 5px solid #FFF;*/

}

/* tab background, active state and mouse over */
.my-slider-tabs span.tab-active,
.my-slider-tabs span:hover {

}

/* tab font size on landscape mobile */
@media screen and (max-width: 640px) {

    .my-slider-tabs span {
        font-size: 10px;
    }

}

/* tab font size on portrait mobile */
@media screen and (max-width: 360px) {

    .my-slider-tabs span {
        font-size: 8px;
    }

}