body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #FFFFFF;
    font-family: 'Open Sans', Courier, sans-serif;
    text-align: left;
    font-size: calc(51vh/19.20);
    font-size: calc(36vw/7.46);
    height: calc(1920vh/19.20);
    margin: 0;
    padding: 0;
    width: calc(1080vw/10.80);
}

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

.image1 {
    float: right;
    margin-left: calc(10vw/10.80);
    clear: both;
}

#hours {
    color: #808080;
    background-color: #004400;
    text-align: center;
}

#hourstable {
    color: #002564;
    border: calc(3vw/10.80) blue solid;
}

h2 {
    color: white;
}

.item h2 {
    text-align: center;
    width: 100%;
    color: rgb(0, 37, 100);
}

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

#imagediv {
    z-index: 20;
}

.q {
    background-color: transparent;
    text-align: center;
    z-index: 20;
}

#qtitle {
    background-color: green;
    color: #F2F1F0;
    text-align: center;
    z-index: 30;
}

.dheader {
    height: calc(70vh/19.20);
    line-height: calc(70vh/19.20);
}

.qheader {
    color: #000000;
    z-index: 30;
}

.qheaderrow {
    text-align: center;
}

#progressBarContainer {
    bottom: calc(-0vh/19.20);
    left: calc(-0vw/10.80);
    position: absolute;
    width: 100%;
    z-index: 1000;
}

#progressBar {
    height: calc(10vh/19.20);
    background-color: transparent;
}

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

.bar {
    background-color: transparent;
}

.leftangletriangle {
    width: 0;
    height: 0;
    text-indent: calc(-9999vw/10.80);
    border-top: calc(100vh/19.20) solid #ffffff;
    border-right: calc(1080vw/10.80) solid transparent;
    position: relative;
    top: calc(-100vh/19.20);
}

.rightangletriangle {
    width: 0;
    height: 0;
    text-indent: calc(-9999vw/10.80);
    border-bottom: calc(100vh/19.20) solid #ffffff;
    border-left: calc(1080vw/10.80) solid transparent;
    position: relative;
    top: calc(-100vh/19.20);
}

.logo {
    /* background-color: #ffffff; */
    max-height: calc(100vh/19.20);
    height: calc(100vh/19.20);
}

.leftlogo {
    position: absolute;
    left: calc(100vw/10.80);
    top: calc(30vh/19.20);
}

.rightlogo {
    position: absolute;
    right: calc(100vw/10.80);
    text-align: right;
    top: calc(50vh/19.20);
}

.subtitlearea {
    position: absolute;
    right: calc(100vw/10.80);
    text-align: right;
    top: calc(50vh/19.20);
    width: calc(550vw/10.80);
}

.company {
    color: #B2CDD0;
    font-size: calc(20vh/19.20);
    font-weight: 700;
    text-align: right;
    width: calc(550vw/10.80);
}

.subtitle {
    color: #00579B;
    font-size: calc(35vh/19.20);
    font-weight: 500;
    text-align: right;
    width: calc(550vw/10.80);
}

.zone3 {
    min-height: calc(185vh/19.20);
    position: absolute;
    bottom: calc(0vh/19.20);
    width: 100%;
    z-index: 10;
}

#topnav {
    display: none;
    height: calc(100vh/19.20);
    min-height: calc(100vh/19.20);
}

#hours {
    position: absolute;
    top: 40vh/19.20);
    left: calc(37vw/10.80);
    font-size: calc(40vh/19.20);
    font-weight: 700;
    height: calc(82vh/19.20);
    line-height: calc(82vh/19.20);
    width: calc(375vw/10.80);
}

#hourstable {
    position: absolute;
    font-size: calc(42vh/19.20);
    top: calc(120vh/19.20);
    left: calc(37vw/10.80);
    font-weight: 500;
    width: calc(375vw/10.80);
}

#jputdotwshort {
    padding-right: calc(25vw/10.80);
    font-weight: 700;
}

#progress {
    position: fixed;
    top: calc(1745vh/19.20);
    left: calc(1000vw/10.80);
    width: calc(90vw/10.80);
    height: calc(90vh/19.20);
    opacity: 0.8;
}

.item {
    position: absolute;
    top: calc(0vh/19.20);
    left: calc(0vw/10.80);
}

.item h2 {
    font-size: calc(20vh/19.20);
    position: absolute;
    line-height: calc(41vh/19.20);
    width: 100%;
}

.circle_animation {
    stroke-dashoffset: 188;
    stroke-dasharray: 188;
    /* this value is the pixel circumference of the circle */
    transition: all 1s linear;
}

#logodiv {
    height: calc(100vh/19.20);
    right: calc(10vw/10.80);
    position: absolute;
}

#toplogoimg {
    max-height: calc(98vh/19.20);
    max-width: calc(400vw/10.80);
    float: right;
}

#imagediv {
    height: calc(662vh/19.20);
    left: calc(629vw/10.80);
    position: fixed;
    top: calc(119vh/19.20);
    width: calc(410vw/10.80);
}

.q {
    font-size: calc(90vh/19.20);
    font-weight: 700;
    height: calc(82vh/19.20);
    position: relative;
    width: calc(179vw/10.80);
}

#queuedata {
    color: #002564;
    height: calc(271vh/19.20);
    left: calc(0vw/10.80);
    min-height: calc(271vh/19.20);
    position: absolute;
    top: calc(0vh/19.20);
    width: 100%;
    z-index: 100;
}

#qtitle {
    font-size: calc(44vh/19.20);
    font-weight: 700;
    height: calc(77vh/19.20);
    left: calc(-1vw/10.80);
    line-height: calc(77vh/19.20);
    position: absolute;
    top: calc(-2vh/19.20);
    width: calc(386vw/10.80);
}

.qheader {
    height: calc(70vh/19.20);
    line-height: calc(70vh/19.20);
    width: calc(276vw/10.80);
}

.qheaderrow {
    width: calc(276vw/10.80);
    ;
    font-weight: 600;
}

#qheaderbon {
    left: calc(192vw/10.80);
}

#themelogo {
    height: calc(750vh/19.20);
    left: calc(629vw/10.80);
    position: absolute;
    top: calc(60vh/19.20);
    width: calc(384vw/10.80);
}

#themelogoimg {
    max-width: calc(384vw/10.80);
    max-height: calc(750vh/19.20);
}