@font-face {
    font-family  : 'Roboto';
    src          : url('../fonts/Roboto-Regular.woff2') format('woff2'),
    url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Roboto';
    src          : url('../fonts/Roboto-Bold.woff2') format('woff2'),
    url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight  : bold;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Roboto';
    src          : url('../fonts/Roboto-Black.woff2') format('woff2'),
    url('../fonts/Roboto-Black.woff') format('woff');
    font-weight  : 900;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.eot');
    src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Bold.woff2') format('woff2'),
    url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Black.eot');
    src: url('../fonts/Montserrat-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Black.woff2') format('woff2'),
    url('../fonts/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.eot');
    src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Regular.woff2') format('woff2'),
    url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.eot');
    src: url('../fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Medium.woff2') format('woff2'),
    url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --background-color: rgba(45, 45, 45);
    --primary-color: rgb(240,240,240);
    --gradient-color: linear-gradient(30deg,#505050 0,#202020 30%,#202020 60%,#505050 100%);
}

body {
    position         : relative;
    background-color : #101010;
    overflow         : hidden;
    color            : #ebebeb;
    font-family      : 'Montserrat', sans-serif;
}

.pos-absolute {
    position: absolute;
}

.pos-relative {
    position: relative;
}

.placeholder {
    z-index: 1;
}

.auto-index {
    z-index: 2;
    position: relative;
}

section.container-fluid {
    padding-left  : 0 !important;
    padding-right : 0 !important;
}

.carousel-cell {
    width      : 100%;
    min-width  : 100vw;
    min-height : 70vh;
    max-height : 70%;
}

.product-image {
    height              : 100%;
    background-repeat   : no-repeat, no-repeat;
    background-size     : contain, cover;
    background-position : center center, center center;
    background-color    : #d0d0d0;
}

.product-info {
    height : 70vh;
}

.p-padding {
    padding : 1.5vw 1.5vw 0 1.5vw;
}

.supplier-info {
    border-top       : 2px solid #bdbdbd;
    height           : 30vh;
    background-color : #e7e7e7;
}

.product-info-extended {
    margin-top : 3vh;
}

.current-product-price,
.current-price {
    line-height      : 7.5rem;
    font-weight      : 900;
    height           : 100%;
    width            : auto;
    background-color : #f39524;
}

.product-price {
    font-size   : calc(6rem + 4vh);
    color       : #ffffff;
    height      : 100%;
    margin-left : 1vw;
}

.product-price span {
    padding : 2vh 2vw;
}

.product-price span.price {
    font-size   : calc(2rem + 2vh);
    color       : #2f2f2f;
    height      : 50%;
    font-weight : 700;
    padding     : 1.5vh 0.5vw 1.5vh 0.5vw;
    background-color : #979797;
}

.product-title {
    overflow-wrap : normal;
    font-weight   : 700;
    font-size     : calc(1.25rem + 2vw);
    line-height   : calc(2rem + 2vw);
}

.product-desc {
    max-width   : 100%;
    margin-top  : 3vh;
    font-size   : calc(1.5rem + 1vw);
    line-height : calc(2.5rem + 1vw);
    overflow    : hidden;
}

.qr-code {

}

.map {
    height              : 100%;
    background-repeat   : no-repeat;
    background-size     : cover;
    background-position : center;
    background-color    : #ffffff;
}

.qr-code svg {
    width  : 100%;
    height : 100%;
}

.company-address h3 {
    font-weight : 700;
    font-size   : calc(1.7rem + 1vw);
    line-height : calc(1.5rem + 1vw);
}

.company-address span {
    font-size   : calc(1.25rem + 0.75vw);
    line-height : calc(1.5rem + 1vw);
    display     : inline-block;
    width       : 100%;
}

.company-logo {
    padding : 1vh 1vw;
    width   : 100%;
}

.company-logo img {
    height     : auto;
    max-height : 100%;
    width      : 100% !important;
}

.box {
    position : absolute;
    right    : 10px;
    top      : 10px;
    width    : 100px;
    height   : 100px;
    display  : inline-block;
}

.progressbar {
    width           : 100px;
    height          : 100px;
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.progressbar > .inner {
    position : absolute;
    color    : red;
}

.progressbar > svg {
    height  : 100%;
    display : block;
}

.progressbar-text {
    font-size : 2rem;
}




/*------------------------------------------------------
                CSS FOR VIDEOWALL DISPLAYS
------------------------------------------------------*/

/*-------------------------------
Videowall Display Full HD
-------------------------------*/

span.price {
    font-size: 11vh;
    position: absolute;
    top: 0;
    right: 0;
    width: 39vw;
    text-align: center;
    font-weight: 600;
    margin-top: 0;
}

h1.product-name {
    position: absolute;
    font-size: 10vh;
    top: 15vh;
    text-overflow: ellipsis;
    text-align: center;
    max-width: 100%;
    /*white-space: nowrap;*/
    overflow: hidden;
    padding: 0 37px;
    right: 0;
    width: 40vw;
    max-height: 390px;
}

img.product-image {
    height: 82vh;
    min-height: 82vh;
    width: auto;
    max-width:65vw;
    padding: 0 11px 11px 0;
    background: #101010;

}

.outside-background {
    width: 38.5vw;
    top: 55vh;
    position: absolute;
    background: white;
    height: 25vh;
    margin: auto;
    left: 61.5%;
    right: 0;
    text-align: center;
    z-index: 1;
    bottom: 0;
}


img.company-logo {
    height: 25vh;
    width: auto;
    position: absolute;
    margin: auto;
    left: 0.5%;
    right: 0;
    text-align: center;
    z-index: 1;
    bottom: 0;
}

img.presented-by-img {
    height: 8vh;
}

.qr-code svg {
    height: 20vh!important;
    width: auto!important;
    padding:1.5vh;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.qr-code {
    position: absolute;
    top: 4%;
    left: 47.5%;
    background-color: white;
}

.bottom {
    width: 100%;
    position: absolute;
    display: flex;
    bottom: -194px;
    left: 0;
    justify-content: space-around;
    height: 18vh;
    align-items: center;
    background: rgb(232,20,19);
    background: linear-gradient(90deg, rgba(232,20,19,1) 0%, rgba(94,8,7,1) 100%);
}

.bottom p {
    font-size: 7vh;
    font-weight: 500;
    margin-bottom: 0;
}


/*-------------------------------
Videowall Display Blechen Carré
-------------------------------*/

@media (min-width: 672px) and (max-width: 673px) {

    h1.product-name {
        right: 0;
        bottom: 0;
        max-width: 44vw;
        font-size: 10vh;
        padding: 0 5px;
        width: 44vw;
        top: 20vh;
    }

    img.product-image {
        height: 100vh;
        min-height: 100vh;
        width: auto;
        max-width: 65vw;
        padding: 0 5px 0 0;
    }

    span.price {
        width: 43vw;
        font-size: 15vh;
    }

    .outside-background {
        width: 42.6vw;
        top: 27vh;
        position: absolute;
        background: white;
        height: 25vh;
        margin: auto;
        left: 57%;
        right: 0;
        text-align: center;
        z-index: 1;
        bottom: 0;
    }

    img.company-logo {
        top: 0;
        border-radius: 5px;
        left: 0;
    }

    img.presented-by-img {
        top: 58vh;
        right: 10%;
    }

    .qr-code svg {
        height: 27vh!important;
        width: auto!important;
    }

    .qr-code {
        position: absolute;
        left: 43.5%;
    }

    .bottom {
        width: 42.9%;
        position: absolute;
        display: flex;
        bottom: 0;
        right: 0;
        height: 23vh;
        flex-wrap: wrap;
        left: unset;
        padding: 11px;
    }

    .bottom p {
        font-size: 7vh;
        font-weight: 500;
    }

}



/*-------------------------------
Videowall Display Nordring
-------------------------------*/

@media (min-width: 576px) and (max-width: 577px) {

    h1.product-name {
        padding: 0 7px;
        width: 30vw;
        top: 13vh;
        font-size: 8vh;
    }

    span.price {
        font-size: 8vh;
        width: 31vw;
        margin-top: 0;
    }

    img.product-image {
        height: 81vh;
        max-width: 71vw;
        padding: 0 7px 7px 0;
    }

    .outside-background {
        width: 31vw;
        top: 52.5vh;
        position: absolute;
        background: white;
        height: 25vh;
        left: 69.8%;
        bottom: 0;
    }

    img.company-logo {
        height: 19vh;
        top: 0;
        left: 0;
    }

    img.presented-by-img {
        height: 8vh;
    }

    .qr-code svg {
        height: 22vh!important;
        width: auto!important;
    }

    .qr-code {
        display: none;

    }

    .bottom {
        width: 100%;
        position: absolute;
        display: flex;
        bottom: -78px;
        left: 0;
        height: 21vh;
        align-items: center;
    }

    .bottom p {
        font-size: 6vh;
        font-weight: 500;
    }
}



/*-------------------------------
Videowall Display Spreegalerie
-------------------------------*/
@media (min-width: 640px) and (max-width: 641px) {

    h1.product-name {
        bottom: -18%;
        top: 15vh;
        overflow: hidden;
        padding: 0 10px;
        width: 36vw;
        font-size: 9vh;
    }

    span.price {
        font-size: 10vh;
        width: 33vw;
    }

    img.product-image {
        max-width: 67vw;
        padding: 0 7px 7px 0;
        min-height: 82vh;
    }

    .outside-background {
        width: 35vw;
        top: 53.5vh;
        position: absolute;
        background: white;
        height: 25vh;
        margin: auto;
        left: 65%;
        right: 0;
        text-align: center;
        z-index: 1;
        bottom: 0;
    }

    img.company-logo{
        height: 21vh;
        top: 0;
        left: 0;
    }

    img.presented-by-img {
        bottom: -15%;
        height: 8vh;
    }

    .qr-code svg {
        width: auto!important;
        height: 22vh!important;
    }

    .qr-code {
        position: absolute;
        left: 48.5%;
    }

    .bottom {
        width: 100%;
        position: absolute;
        display: flex;
        bottom: -69px;
        left: 0;
        justify-content: space-around;
        height: 18vh;
        align-items: center;
    }

    .bottom p {
        font-size: 7vh;
        font-weight: 500;
    }
}