body {
    /* optional, center the image */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Ubuntu, Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
    font-size: calc(51vw/19.20);
    height: calc(1080vh/10.80);
    margin: 0;
    padding: 0;
    text-align: left;
    width: calc(1920vw/19.20);
    z-index: -1;
}

#backgroundimage {
    position: fixed;
    height: 100%;
    width: 100%;
    opacity: 0.25;
    background-color: #ffffff;
}

#page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    width: calc(1920vw/19.20);
    height: calc(1080vh/10.80);
    top: calc(0vh/10.80);
    left: calc(0vw/19.20);
    visibility hidden;
}

#progress {
    position: fixed;
    bottom: calc(40vh/10.80);
    right: calc(40vw/19.20);
    width: calc(60vw/19.20);
    height: calc(60vh/10.80);
}

#maincentre {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: calc(1000vh/10.80);
}

#mainbody {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.image1 {
    float: right;
}

#openingtimes {
    display: none;
}

#one {
    /* position: relative; */
}

#two {
    position: relative;
}

#three {
    position: relative;
}

#hours {
    color: #FFFFFF;
    font-size: calc(42vw/19.20);
    font-weight: 900;
    left: calc(30vw/19.20);
    position: absolute;
    top: calc(40vh/10.80);
}

#hourstable {
    color: #002564;
    font-size: calc(42vw/19.20);
    font-weight: 400;
    left: calc(18vw/19.20);
    position: absolute;
    top: calc(170vh/10.80);
}

#jputdotwshort {
    padding-right: calc(25vw/19.20);
}

#benulogo {
    height: calc(60vh/10.80);
    left: calc(60vw/19.20);
    position: absolute;
    top: calc(40vh/10.80);
    width: calc(226vw/19.20);
}

#benulogoimg {
    height: calc(60vh/10.80);
    width: calc(226vw/19.20);
}

h2 {
    color: white;
}

canvas {
    cursor: none;
}

.mute {
    cursor: pointer;
    display: initial;
}

#imagediv {
    height: calc(662vh/10.80);
    width: calc(410vw/19.20);
}

#progressBar {
    width: 90%;
    margin: calc(10vw/19.20) auto;
    height: calc(22vh/10.80);
    background-color: #0A5F44;
}

#progressBar div {
    height: 100%;
    text-align: right;
    padding: 0 calc(10vw/19.20);
    line-height: calc(22vh/10.80);
    /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #CBEA00;
    box-sizing: border-box;
}

.item {
    position: absolute;
    top: calc(0vh/10.80);
    left: calc(0vw/19.20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.item h2 {
    font-size: calc(17vw/19.20);
    text-align: center;
    position: absolute;
    width: 100%;
    color: #00255A;
    margin: 0;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
    transition: all 1s linear;
}

#imagediv {
    position: fixed;
    top: calc(224vh/10.80);
    left: calc(1448vw/19.20);
    z-index: 20;
}

#h2 {}

#svgid {}

#ticker {
    position: absolute;
    top: calc(1006vh/10.80);
    left: calc(0vw/19.20);
    width: calc(1890vw/19.20);
    height: calc(74vh/10.80);
}

#queuearea {
    width: calc(339vw/19.20);
    height: 100%;
    background-color: transparent;
}

#queuedata {
    border: solid calc(2vw/19.20) #002664;
    border-right: none;
    border-top-left-radius: calc(16vw/19.20);
    border-bottom-left-radius: calc(16vw/19.20);
    color: #002564;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(900vh/10.80);
    left: calc(1641vw/19.20);
    padding-top: calc(40vh/10.80);
    padding-bottom: calc(40vh/10.80);
    position: relative;
    top: calc(40vh/10.80);
    width: calc(279vw/19.20);
}

#queuepanelimg {
    display: none;
}

#qtitle {
    display: none;
}

#qheader {
    display: none;
}

#one {
    left: calc(10vw/19.20);
}

#benubar {
    height: calc(80vh/10.80);
    left: calc(-300vw/19.20);
    position: relative;
}

#benubarimg {
    height: 100%;
}