/*fibonacci ----------------------------------------------------------*/

.fibonaccicontainer .start {
    width: 100%;
    height: 100%;
}

.fibonaccicontainer .tall, .wide, .container {
    position: absolute;
}

.fibonaccicontainer .box {
    text-align: center;
    color: #fff;
    position: absolute;
    background-position: center;
}

    .fibonaccicontainer .box:hover {
        background-color: var(--mildlyintrigued);
    }

.fibonaccicontainer .votedfor {
    background-color: var(--lookatme) !important;
}

    .fibonaccicontainer .votedfor:hover {
        background-color: var(--lookatme) !important;
    }


.fibonaccicontainer .votedforpending {
    background-color: var(--mildlyintrigued) !important;
}

    .fibonaccicontainer .votedforpending:hover {
        background-color: var(--mildlyintrigued) !important;
    }

.fibonaccicontainer .box select option {
    padding: 30px;
}

.fibonaccicontainer .thirteen {
    background-image: url("../images/13.svg");
    background-color: #333;
}

.fibonaccicontainer .eight {
    background-image: url("../images/8.svg");
    background-color: #444;
}

.fibonaccicontainer .five {
    background-image: url("../images/5.svg");
    background-color: #555;
}

.fibonaccicontainer .three {
    background-image: url("../images/3.svg");
    background-color: #666;
}

.fibonaccicontainer .two {
    background-image: url("../images/2.svg");
    background-color: #777;
}

.fibonaccicontainer .one {
    background-image: url("../images/1.svg");
    background-color: #888;
}


.tally_fibonaccicontainer {
    display: grid;
    grid-template-columns: repeat(6,6.4em);
    align-items: center;
    place-items: center;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
}

    .tally_fibonaccicontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_fibonaccicontainer .tallygroupheader {
        font-weight: bold;
        background-color: var(--alsoran);
        margin: .2em;
        width: 5em;
        height: 5em;
        display: grid;
        align-items: center;
        place-items: center;
        border: .4em #222 solid;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .tally_fibonaccicontainer #tallyheader_1 {
        background-image: url("../images/1.svg");
    }

    .tally_fibonaccicontainer #tallyheader_2 {
        background-image: url("../images/2.svg");
    }

    .tally_fibonaccicontainer #tallyheader_3 {
        background-image: url("../images/3.svg");
    }

    .tally_fibonaccicontainer #tallyheader_5 {
        background-image: url("../images/5.svg");
    }

    .tally_fibonaccicontainer #tallyheader_8 {
        background-image: url("../images/8.svg");
    }

    .tally_fibonaccicontainer #tallyheader_13 {
        background-image: url("../images/13.svg");
    }

    .tally_fibonaccicontainer .tallygroupvalue {
        width: 2em;
        height: 2em;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1em;
        color: #fff;
        position: absolute;
        top: -.5em;
        right: -.5em;
        z-index: 100;
        border-radius: .5em;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_fibonaccicontainer .valueall {
        background-color: var(--intense);
    }

    .tally_fibonaccicontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_fibonaccicontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_fibonaccicontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_fibonaccicontainer .yourestimate {
        background-color: var(--lookatme);
    }

    .tally_fibonaccicontainer .yourpendingestimate {
        background-color: var(--mildlyintrigued);
    }

    .tally_fibonaccicontainer .availablestimate:hover {
        background-color: var(--whatdoyouwant);
        cursor: pointer;
    }

@media screen and (orientation:landscape) {
    .fibonaccicontainer {
        --height: 98vh;
        width: calc(var(--height) * 1);
        height: calc(var(--height) * .6211);
        max-width: 120vh;
        max-height: calc(120vh * .6211);
    }

        .fibonaccicontainer .start {
            right: 0px;
            top: 0px;
        }

            .fibonaccicontainer .start > .box {
                height: 100%;
                width: 62.11%;
            }


        .fibonaccicontainer .wide {
            height: 37.89%;
            width: 100%;
        }

            .fibonaccicontainer .wide > .box {
                width: 62.11%;
                height: 100%;
            }

        .fibonaccicontainer .tall {
            width: 37.89%;
            height: 100%;
        }

            .fibonaccicontainer .tall > .box {
                width: 100%;
                height: 62.11%;
            }

        .fibonaccicontainer .thirteen {
            right: 0px;
            top: 0px;
        }

        .fibonaccicontainer .eight-container {
            left: 0px;
            top: 0px;
            border-right: 1px solid #fff;
        }

        .fibonaccicontainer .eight {
            top: 0px;
            left: 0px;
        }

        .fibonaccicontainer .five-container {
            bottom: 0px;
            left: 0px;
            border-top: 1px solid #fff;
        }

        .fibonaccicontainer .five {
            bottom: 0px;
            left: 0px;
        }

        .fibonaccicontainer .three-container {
            right: 0px;
            bottom: 0px;
            border-left: 1px solid #fff;
        }

        .fibonaccicontainer .three {
            bottom: 0px;
            right: 0px;
        }

        .fibonaccicontainer .two-container {
            left: 0px;
            top: 0px;
            border-bottom: 1px solid #fff;
        }

        .fibonaccicontainer .two {
            top: 0px;
            right: 0px;
        }

        .fibonaccicontainer .one-container {
            top: 0px;
            left: 0px;
            border-right: 1px solid #fff;
        }

        .fibonaccicontainer .one {
            top: 0px;
            left: 0px;
            border-bottom: 1px solid #fff;
        }
}


@media screen and (orientation:portrait) {

    .fibonaccicontainer {
        --height: 148vw;
        height: calc(var(--height) * 1);
        width: calc(var(--height) * .6211);
        max-height: calc((100vh - 6rem) - 6rem);
        max-width: calc((100vh * .6211) - 6rem);
    }

        .fibonaccicontainer .start {
            right: 0px;
            bottom: 0px;
        }

            .fibonaccicontainer .start > .box {
                width: 100%;
                height: 62.11%;
            }

        .fibonaccicontainer .wide {
            width: 37.89%;
            height: 100%;
        }

            .fibonaccicontainer .wide > .box {
                height: 62.11%;
                width: 100%;
            }

        .fibonaccicontainer .tall {
            height: 37.89%;
            width: 100%;
        }

            .fibonaccicontainer .tall > .box {
                height: 100%;
                width: 62.11%;
            }

        .fibonaccicontainer .thirteen {
            right: 0px;
            bottom: 0px;
        }

        .fibonaccicontainer .eight-container {
            left: 0px;
            top: 0px;
            border-bottom: 1px solid #fff;
        }

        .fibonaccicontainer .eight {
            top: 0px;
            left: 0px;
        }

        .fibonaccicontainer .five-container {
            top: 0px;
            right: 0px;
            border-left: 1px solid #fff;
        }

        .fibonaccicontainer .five {
            top: 0px;
            right: 0px;
        }

        .fibonaccicontainer .three-container {
            right: 0px;
            bottom: 0px;
            border-top: 1px solid #fff;
        }

        .fibonaccicontainer .three {
            bottom: 0px;
            right: 0px;
        }

        .fibonaccicontainer .two-container {
            left: 0px;
            bottom: 0px;
            border-right: 1px solid #fff;
        }

        .fibonaccicontainer .two {
            bottom: 0px;
            left: 0px;
        }

        .fibonaccicontainer .one-container {
            top: 0px;
            left: 0px;
            border-bottom: 1px solid #fff;
        }

        .fibonaccicontainer .one {
            top: 0px;
            left: 0px;
        }



      #Tally_Container{
          display:grid;
          margin:auto;
      }

    .tally_fibonaccicontainer {
        display: grid;
        grid-template-columns: repeat(2,12em);
/*        align-items: center;
        place-items: center;*/
        margin: auto;
/*        z-index: 1;
        font-size: calc(100vw /45.46);*/
    }

        .tally_fibonaccicontainer .tallygroup {
            /*margin: .2em;*/
            margin-bottom: .5em;
/*            align-items: flex-start;
            position: relative;*/
        }

        .tally_fibonaccicontainer .tallygroupheader {
/*            font-weight: bold;
            background-color: var(--alsoran);
            margin: .2em;*/
            width: 10em;
            height: 10em;
/*            display: grid;
            align-items: center;
            place-items: center;
            border: .4em #222 solid;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;*/
        }

        .tally_fibonaccicontainer .tallygroupvalue {
            width: 2em;
            height: 2em;
            font-size: 2em;
            /*            margin: .2em;
            display: grid;
            align-items: center;
            place-items: center;
            
            color: #fff;
            position: absolute;*/
            top: -.5em;
            right: -.7em;
            /*            z-index: 100;
            border-radius: .5em;
            border: .1em solid #ccc;
            background-color: #888;
            font-weight: bold;
            visibility: visible;*/
        }

}

/*tshirts ----------------------------------------------------------*/

.tshirtcontainer {
}

    .tshirtcontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5,15vw);
        grid-gap: 3vw;
    }

    .tshirtcontainer .box {
        height: 15vw;
        width: 15vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 12vw;
        border-radius: 50%;
    }

        .tshirtcontainer .box:hover {
            /*border: .3rem solid #777;*/
            background-color: var(--mildlyintrigued);
        }



    .tshirtcontainer .xsshirt {
        background-image: url('../images/xs.svg');
    }

    .tshirtcontainer .sshirt {
        background-image: url('../images/s.svg');
    }

    .tshirtcontainer .mshirt {
        background-image: url('../images/m.svg');
    }

    .tshirtcontainer .lshirt {
        background-image: url('../images/l.svg');
    }

    .tshirtcontainer .xlshirt {
        background-image: url('../images/xl.svg');
    }

    .tshirtcontainer .votedfor {
        background-color: var(--lookatme);
    }

.tally_tshirtscontainer {
    display: grid;
    grid-template-columns: repeat(5,auto);
    align-items: center;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
}

    .tally_tshirtscontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_tshirtscontainer .tallygroupheader {
        margin: .2em;
        width: 5em;
        height: 5em;
        display: grid;
        align-items: center;
        place-items: center;
        border-bottom: .4rem solid #ffffff;
    }

        .tally_tshirtscontainer .tallygroupheader img {
            height: 100%;
            width: 100%;
        }

    .tally_tshirtscontainer .tallygroupvalue {
        width: 2em;
        height: 2em;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1em;
        color: #fff;
        position: absolute;
        top: -.3rem;
        right: 1.6rem;
        z-index: 100;
        border-radius: .5em;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_tshirtscontainer .valueall {
        background-color: var(--intense);
    }

    .tally_tshirtscontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_tshirtscontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_tshirtscontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_tshirtscontainer .yourestimate {
        border-bottom: .4rem solid var(--lookatme);
    }

    .tally_tshirtscontainer .yourpendingestimate {
        border-bottom: .4rem solid var(--mildlyintrigued);
    }

    .tally_tshirtscontainer .availablestimate:hover {
        border-bottom: .4rem solid var(--whatdoyouwant);
        cursor: pointer;
    }

@media screen and (orientation:portrait) {

    .tshirtcontainer .start {
        /*height: 100%;
        width: 100%;*/
        display: grid;
        grid-template-columns: repeat(2,30vw);
        grid-gap: 3vw;
    }

    .tshirtcontainer .box {
        height: 30vw;
        width: 30vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 25vw;
        border-radius: 50%;
    }

    .tally_tshirtscontainer {
        display: grid;
        grid-template-columns: repeat(2,30vw);
        grid-gap: 3vw;
        align-items: center;
        place-items: center;
        margin: auto;
        z-index: 1;
        font-size: calc(100vw /45.46);
        width: fit-content;
    }

    .tshirtcontainer .votedfor {
        background-color: var(--lookatme);
    }

    .tally_tshirtscontainer .tallygroup {
        width: 30vw;
        height: 30vw;
    }

    .tally_tshirtscontainer .tallygroupheader {
        width: 25vw;
        height: 25vw;
        margin: auto;
    }

    .tally_tshirtscontainer .tallygroupvalue {
        width: 1.6rem;
        height: 1.6rem;
        align-items: center;
        font-size: .8rem;
        top: -.6rem;
        right: 1.2rem;
        border-radius: .4rem;
        border: .1rem solid #ccc;
    }
}

/*STARS --------------------------------------------------------------------------------------------*/
.starscontainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

    .starscontainer input.star {
        display: none;
    }

    .starscontainer label.star {
        color: #444;
        transition: all .2s;
        width: 10vw;
        height: 10vw;
    }

    .starscontainer input.star:checked ~ label.star {
        background-image: url('../images/starfilled.svg');
        background-repeat: no-repeat;
        background-size: contain;
        transition: all .25s;
    }

    .starscontainer label.star:hover {
        transform: rotate(-15deg) scale(1.3);
    }

    .starscontainer label.star {
        background-image: url('../images/starempty.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

.tally_starscontainer {
    display: grid;
    grid-template-columns: repeat(5,auto);
    align-items: center;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
}

    .tally_starscontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_starscontainer .tallygroupheader {
        margin: .2rem;
        width: 5rem;
        height: 5rem;
        display: grid;
        align-items: center;
        place-items: center;
        border-radius: 2.5rem;
        border-bottom: .4rem solid #ffffff;
        border: .15rem solid #fff;
    }

        .tally_starscontainer .tallygroupheader img {
            height: 100%;
            width: 100%;
        }

    .tally_starscontainer .tallygroupvalue {
        width: 2rem;
        height: 2rem;
        margin: .2rem;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1rem;
        color: #fff;
        position: absolute;
        top: -.4rem;
        left: 1.6rem;
        z-index: 100;
        border-radius: .5rem;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_starscontainer .valueall {
        background-color: var(--intense);
    }

    .tally_starscontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_starscontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_starscontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_starscontainer .yourestimate {
        border: .35rem solid var(--lookatme);
    }

    .tally_starscontainer .yourpendingestimate {
        border: .35rem solid var(--mildlyintrigued);
    }

    .tally_starscontainer .availablestimate:hover {
        border: .35rem solid var(--whatdoyouwant);
        cursor: pointer;
    }

@media screen and (orientation:portrait) {
    .tally_starscontainer {
        display: grid;
        grid-template-columns: repeat(3,auto);
        grid-row-gap: 1rem;
        align-items: center;
        margin: .2em;
        z-index: 1;
        font-size: calc(100vw /45.46);
    }

        .tally_starscontainer .tallygroupvalue {
            width: 1.6rem;
            height: 1.6rem;
            align-items: center;
            font-size: .8rem;
            top: -.3rem;
            left: 1.6rem;
            border-radius: .4rem;
            border: .1rem solid #ccc;
        }
}





/*fibonacci plus ----------------------------------------------------------*/

.fibonaccipluscontainer {
}

    .fibonaccipluscontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6,10vw);
        grid-gap: 2vw;
    }

    .fibonaccipluscontainer .box {
        height: 10vw;
        width: 10vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 9vw;
        border-radius: 20%;
    }

        .fibonaccipluscontainer .box:hover {
            /*border: .3rem solid #777;*/
            background-color: var(--mildlyintrigued);
        }



    .fibonaccipluscontainer .half {
        background-image: url('../images/halffibonacciplus.svg');
    }

    .fibonaccipluscontainer .one {
        background-image: url('../images/1fibonacciplus.svg');
    }

    .fibonaccipluscontainer .two {
        background-image: url('../images/2fibonacciplus.svg');
    }

    .fibonaccipluscontainer .three {
        background-image: url('../images/3fibonacciplus.svg');
    }

    .fibonaccipluscontainer .five {
        background-image: url('../images/5fibonacciplus.svg');
    }

    .fibonaccipluscontainer .eight {
        background-image: url('../images/8fibonacciplus.svg');
    }

    .fibonaccipluscontainer .thirteen {
        background-image: url('../images/13fibonacciplus.svg');
    }

    .fibonaccipluscontainer .twenty {
        background-image: url('../images/20fibonacciplus.svg');
    }

    .fibonaccipluscontainer .forty {
        background-image: url('../images/40fibonacciplus.svg');
    }

    .fibonaccipluscontainer .onehundred {
        background-image: url('../images/100fibonacciplus.svg');
    }

    .fibonaccipluscontainer .unknown {
        background-image: url('../images/unknownfibonacciplus.svg');
    }

    .fibonaccipluscontainer .votedfor {
        background-color: var(--lookatme);
    }

.tally_fibonaccipluscontainer {
    display: grid;
    grid-template-columns: repeat(6,auto);
    align-items: center;
    margin: auto;
    z-index: 1;
    font-size: calc(100vw /45.46);
    width: fit-content;
}

    .tally_fibonaccipluscontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_fibonaccipluscontainer .tallygroupheader {
        margin: .2em;
        width: 5em;
        height: 5em;
        display: grid;
        align-items: center;
        place-items: center;
        /*border-bottom: .4rem solid #ffffff;*/
        padding: .5rem;
        border-radius: 20%;
    }

    /*.tally_fibonaccipluscontainer .tallygroupheader img {
            height: 100%;
            width: 100%;
        }*/

    .tally_fibonaccipluscontainer .tallygroupvalue {
        width: 2em;
        height: 2em;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1em;
        color: #fff;
        position: absolute;
        top: -.3rem;
        right: 1.6rem;
        z-index: 100;
        border-radius: 20%;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_fibonaccipluscontainer .valueall {
        background-color: var(--intense);
    }

    .tally_fibonaccipluscontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_fibonaccipluscontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_fibonaccipluscontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_fibonaccipluscontainer .yourestimate {
        /*border-bottom: .4rem solid var(--lookatme);*/
        background-color: var(--lookatme);
    }

    .tally_fibonaccipluscontainer .yourpendingestimate {
        /*border-bottom: .4rem solid var(--mildlyintrigued);*/
        background-color: var(--mildlyintrigued);
    }

    .tally_fibonaccipluscontainer .availablestimate:hover {
        /*border-bottom: .4rem solid var(--whatdoyouwant);*/
        background-color: var(--whatdoyouwant);
        cursor: pointer;
    }

    .tally_fibonaccipluscontainer .headerimage {
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

    .tally_fibonaccipluscontainer .t-half {
        background-image: url('../images/halffibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-1 {
        background-image: url('../images/1fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-2 {
        background-image: url('../images/2fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-3 {
        background-image: url('../images/3fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-5 {
        background-image: url('../images/5fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-8 {
        background-image: url('../images/8fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-13 {
        background-image: url('../images/13fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-20 {
        background-image: url('../images/20fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-40 {
        background-image: url('../images/40fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-100 {
        background-image: url('../images/100fibonacciplus.svg');
    }

    .tally_fibonaccipluscontainer .t-unknown {
        background-image: url('../images/unknownfibonacciplus.svg');
    }

@media screen and (orientation:portrait) {
    .fibonaccipluscontainer .start {
        /*        height: 100%;
        width: 100%;
        display: grid;*/
        /*margin:auto;*/
        grid-template-columns: repeat(3,20vw);
        grid-row-gap: 5vw;
        /*        grid-gap: 2vw;*/
    }

    .fibonaccipluscontainer .box {
        height: calc(20vw - 1rem);
        width: calc(20vw - 1rem);
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: calc(19vw - 1rem);
        border-radius: 20%;
        box-sizing: border-box;
    }

    .fibonaccipluscontainer .votedfor {
        background-color: var(--lookatme);
    }

    .tally_fibonaccipluscontainer {
        grid-template-columns: repeat(3,25vw);
        grid-row-gap: 1vw;
        font-size: calc(100vw /45.46);
    }

        .tally_fibonaccipluscontainer .tallygroupheader {
            width: 20vw;
            height: 20vw;
        }

        .tally_fibonaccipluscontainer .tallygroupvalue {
            width: 1.6rem;
            height: 1.6rem;
            align-items: center;
            font-size: .8rem;
            top: -.1rem;
            right: 2.4rem;
            border-radius: .4rem;
            border: .1rem solid #ccc;
        }
}




/*time ----------------------------------------------------------*/

.timecontainer {
}

    .timecontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4,20vw);
        grid-gap: 2vw;
        padding-top: .5rem;
    }

    .timecontainer .boxgroup {
        border: 1px solid var(--whatever);
    }

    .timecontainer .boxgroupheader {
        /* font-size:.8rem;*/
        font-size: 80%;
        font-weight: 700;
        text-align: center;
    }

    .timecontainer .box {
        /*height: 1vw;*/
        /*width: 15vw;*/
        background-color: #fff;
        position: relative;
        background-position: .1rem;
        background-repeat: no-repeat;
        background-size: 1rem;
        height: 1.2rem;
        padding-left: 1.3rem;
        font-size: 70%;
        line-height: 1.2rem;
        /*border-radius: .5vw;*/
        cursor: pointer;
        border-top: 1px solid var(--whatever);
    }

        .timecontainer .box:hover {
            /*border: .3rem solid #777;*/
            background-color: var(--mildlyintrigued);
        }



    .timecontainer .t15-minutes {
        background-image: url('../images/15minutes.svg');
    }

    .timecontainer .t30-minutes {
        background-image: url('../images/30minutes.svg');
    }

    .timecontainer .t45-minutes {
        background-image: url('../images/45minutes.svg');
    }

    .timecontainer .t1-hour {
        background-image: url('../images/1hour.svg');
    }

    .timecontainer .t2-hours {
        background-image: url('../images/2hours.svg');
    }

    .timecontainer .t4-hours {
        background-image: url('../images/4hours.svg');
    }

    .timecontainer .t1-day {
        background-image: url('../images/1day.svg');
    }

    .timecontainer .t2-days {
        background-image: url('../images/2days.svg');
    }

    .timecontainer .t3-days {
        background-image: url('../images/3days.svg');
    }

    .timecontainer .t1-week {
        background-image: url('../images/1week.svg');
    }

    .timecontainer .t2-weeks {
        background-image: url('../images/2weeks.svg');
    }

    .timecontainer .t3-weeks {
        background-image: url('../images/3weeks.svg');
    }

    .timecontainer .t1-month {
        background-image: url('../images/1month.svg');
    }

    .timecontainer .t2-months {
        background-image: url('../images/2months.svg');
    }

    .timecontainer .t3-months {
        background-image: url('../images/3months.svg');
    }

    .timecontainer .thalf-year {
        background-image: url('../images/halfyear.svg');
    }

    .timecontainer .tthreequarters-year {
        background-image: url('../images/threequartersyear.svg');
    }

    .timecontainer .t1-year {
        background-image: url('../images/1year.svg');
    }

    .timecontainer .t2-years {
        background-image: url('../images/2years.svg');
    }

    .timecontainer .t3-years {
        background-image: url('../images/3years.svg');
    }

    .timecontainer .t5-years {
        background-image: url('../images/5years.svg');
    }

    .timecontainer .votedfor {
        background-color: var(--lookatme);
    }

.tally_timecontainer {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,20vw);
    grid-gap: 2vw;
    padding-top: .5rem;
}

    .tally_timecontainer .tallygroup {
        /*margin: .2em;*/
        align-items: flex-start;
        position: relative;
    }

    .tally_timecontainer .tallysegment {
        border: 1px solid var(--whatever);
        width: 100%;
    }

    .tally_timecontainer .tallysegmentheader {
        font-size: 80%;
        font-weight: 700;
        text-align: center;
    }

    .tally_timecontainer .tallygroupheader {
        cursor: pointer;
        border-top: 1px solid var(--whatever);
        background-color: #fff;
    }

    .tally_timecontainer .headerimage {
        position: relative;
        background-position: .1rem;
        background-repeat: no-repeat;
        background-size: 1rem;
        height: 1.2rem;
        padding-left: 1.3rem;
        font-size: 70%;
        line-height: 1.2rem;
        /*        border:1px solid #fff;*/
    }

        .tally_timecontainer .headerimage:hover {
            /*border-color:var(--whatdoyouwant);*/
        }

    .tally_timecontainer .tallygroupvalue {
        width: 1rem;
        height: 1rem;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: .8rem;
        color: #fff;
        position: absolute;
        top: -.05rem;
        right: -.05rem;
        z-index: 100;
        border-radius: 20%;
        border: .05rem solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_timecontainer .t15-minutes {
        background-image: url('../images/15minutes.svg');
    }

    .tally_timecontainer .t30-minutes {
        background-image: url('../images/30minutes.svg');
    }

    .tally_timecontainer .t45-minutes {
        background-image: url('../images/45minutes.svg');
    }

    .tally_timecontainer .t1-hour {
        background-image: url('../images/1hour.svg');
    }

    .tally_timecontainer .t2-hours {
        background-image: url('../images/2hours.svg');
    }

    .tally_timecontainer .t4-hours {
        background-image: url('../images/4hours.svg');
    }

    .tally_timecontainer .t1-day {
        background-image: url('../images/1day.svg');
    }

    .tally_timecontainer .t2-days {
        background-image: url('../images/2days.svg');
    }

    .tally_timecontainer .t3-days {
        background-image: url('../images/3days.svg');
    }

    .tally_timecontainer .t1-week {
        background-image: url('../images/1week.svg');
    }

    .tally_timecontainer .t2-weeks {
        background-image: url('../images/2weeks.svg');
    }

    .tally_timecontainer .t3-weeks {
        background-image: url('../images/3weeks.svg');
    }

    .tally_timecontainer .t1-month {
        background-image: url('../images/1month.svg');
    }

    .tally_timecontainer .t2-months {
        background-image: url('../images/2months.svg');
    }

    .tally_timecontainer .t3-months {
        background-image: url('../images/3months.svg');
    }

    .tally_timecontainer .thalf-year {
        background-image: url('../images/halfyear.svg');
    }

    .tally_timecontainer .tthreequarters-year {
        background-image: url('../images/threequartersyear.svg');
    }

    .tally_timecontainer .t1-year {
        background-image: url('../images/1year.svg');
    }

    .tally_timecontainer .t2-years {
        background-image: url('../images/2years.svg');
    }

    .tally_timecontainer .t3-years {
        background-image: url('../images/3years.svg');
    }

    .tally_timecontainer .t5-years {
        background-image: url('../images/5years.svg');
    }

    .tally_timecontainer .valueall {
        background-color: var(--intense);
    }

    .tally_timecontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_timecontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_timecontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_timecontainer .yourestimate {
        /*border-bottom: .4rem solid var(--lookatme);*/
        background-color: var(--lookatme);
    }

    .tally_timecontainer .yourpendingestimate {
        /*border-bottom: .4rem solid var(--mildlyintrigued);*/
        background-color: var(--mildlyintrigued);
    }

    .tally_timecontainer .availablestimate:hover {
        /*border-bottom: .4rem solid var(--whatdoyouwant);*/
        background-color: var(--whatever);
        cursor: pointer;
    }

    .tally_timecontainer .headerimage {
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

    .tally_timecontainer .t-half {
        background-image: url('../images/halftime.svg');
    }

    .tally_timecontainer .t-1 {
        background-image: url('../images/1time.svg');
    }

    .tally_timecontainer .t-2 {
        background-image: url('../images/2time.svg');
    }

    .tally_timecontainer .t-3 {
        background-image: url('../images/3time.svg');
    }

    .tally_timecontainer .t-5 {
        background-image: url('../images/5time.svg');
    }

    .tally_timecontainer .t-8 {
        background-image: url('../images/8time.svg');
    }

    .tally_timecontainer .t-13 {
        background-image: url('../images/13time.svg');
    }

    .tally_timecontainer .t-20 {
        background-image: url('../images/20time.svg');
    }

    .tally_timecontainer .t-40 {
        background-image: url('../images/40time.svg');
    }

    .tally_timecontainer .t-100 {
        background-image: url('../images/100time.svg');
    }

    .tally_timecontainer .t-unknown {
        background-image: url('../images/unknowntime.svg');
    }

@media screen and (orientation:portrait) {
    .timecontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,40vw);
        grid-gap: 2vw;
        padding-top: 1rem;
    }

    .tally_timecontainer {
        grid-template-columns: repeat(2,40vw);
    }
}


/*Percent --------------------------------------------------------*/

.percentcontainer {
    padding-left: 8vw;
    padding-right: 8vw;
}

    .percentcontainer .start {
        width: 76vw;
        display: grid;
        position: relative;
        margin-top: 6rem;
    }

    /* kill the slider */

    .percentcontainer input[type=range] {
        -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
        width: 100%; /* Specific width is required for Firefox. */
        background: transparent; /* Otherwise white in Chrome */
    }

        .percentcontainer input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        .percentcontainer input[type=range]:focus {
            outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
        }

        .percentcontainer input[type=range]::-ms-track {
            width: 100%;
            cursor: pointer;
            /* Hides the slider so custom styles can be added */
            background: transparent;
            border-color: transparent;
            color: transparent;
        }

    .percentcontainer input[type=range] {
        width: 100%;
        z-index: 100;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }


        /* style the Thumb */
        .percentcontainer input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            background-image: url('../images/pointer.svg');
            background-position-x: center;
            background-position-y: .2rem;
            background-size: 2.5rem;
            background-repeat: no-repeat;
            height: 6rem;
            width: 3.2rem;
            background-color: transparent;
            border: 0px;
            cursor: ew-resize;
            margin-top: -2.5rem;
        }

        /* All the same stuff for Firefox */
        .percentcontainer input[type=range]::-moz-range-thumb {
            background-image: url('../images/pointer.svg');
            background-position-x: center;
            background-position-y: .2rem;
            background-size: 2.5rem;
            background-repeat: no-repeat;
            height: 6rem;
            width: 3.2rem;
            background-color: transparent;
            border: 0px;
            cursor: ew-resize;
        }

        /* All the same stuff for IE */
        .percentcontainer input[type=range]::-ms-thumb {
            /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
            border: 1px solid #000000;
            height: 36px;
            width: 16px;
            border-radius: 3px;
            background: #ffffff;
            cursor: pointer;
        }


        .percentcontainer input[type=range][disabled] {
            opacity: 0.3;
            cursor: default;
        }

    .percentcontainer .fancycontainer {
        display: grid;
        grid-template-columns: repeat(101,auto);
        height: 2rem;
        width: calc(100% - 1.6rem);
        transform: rotate(180deg);
        position: absolute;
        top: -.8rem;
        left: .9rem;
        z-index: -1;
    }

    .percentcontainer output {
        position: relative;
        font-family: sans-serif;
        font-size: 3rem;
        /*color: #444;*/
    }

    .percentcontainer .output.off {
        color: #444;
    }

    .percentcontainer .output.on {
        color: var(--mildlyintrigued);
    }

    .percentcontainer .valueindicator {
        position: absolute;
        transform: rotate(180deg);
        top: 3.2rem;
    }




    .percentcontainer .spike {
        width: auto;
        border-right: 1px solid#fff;
    }

        .percentcontainer .spike.off {
            height: .5rem;
            transition: all .7s;
            background-color: #fff;
            border-bottom: 2px solid #444;
        }

        .percentcontainer .spike.offgt {
            height: 1.2rem;
            transition: all .7s;
            background-color: #028529;
        }



        .percentcontainer .spike.on {
            height: 3.2rem;
            background-image: url('../images/pointerneedle.svg');
            background-repeat: no-repeat;
            background-size: 1px 1.5rem;
            background-position-x: center;
            background-position-y: 0rem;
        }


    .percentcontainer button {
        height: 2.4rem;
        width: 6.4rem;
        background-color: #fff;
        border: .1rem solid var(--alsoran);
        color: var(--alsoran);
        border-radius: .5rem;
        position: absolute;
        top: 3rem;
        outline: none;
        font-size: 1rem;
        cursor: pointer;
    }

        .percentcontainer button:hover {
            background-color: #444;
            color: #fff;
        }

    .percentcontainer .increase {
        top: 3rem;
        right: unset;
        left: 50vw;
    }

    .percentcontainer .decrease {
        top: 3rem;
        left: unset;
        right: 50vw;
    }





.tally_percentcontainer {
    display: grid;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
    width: 76vw;
    grid-template-rows: auto auto auto;
    /*margin-bottom:1rem;*/
}

    .tally_percentcontainer .percentcontainer {
        padding-left: 0vw;
        padding-right: 0vw;
        position: relative;
        margin-top: 1rem;
    }

        .tally_percentcontainer .percentcontainer .start {
            /*width: 76vw;*/
            width: auto;
            display: grid;
            position: relative;
            margin-top: 5rem;
        }

    .tally_percentcontainer .tallygrouparea {
        display: grid;
        align-items: center;
        place-items: center;
        width: auto;
        margin-top: 1rem;
    }

    .tally_percentcontainer .tallygroups {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        place-items: center;
        width: auto;
    }

    .tally_percentcontainer .tallygroup {
        margin-right: 1px;
        align-items: flex-start;
        position: relative;
    }

    .tally_percentcontainer .tallygroupheader {
        width: 0vw;
        height: 5vw;
        display: grid;
        align-items: center;
        place-items: center;
        transition: all .5s;
        border-radius: .1rem;
    }

        .tally_percentcontainer .tallygroupheader.someonesestimate {
            width: 5vw;
            height: 5vw;
            display: grid;
            align-items: center;
            place-items: center;
            background-color: var(--alsoran);
            transition: all 1.5s;
            cursor: pointer;
        }


        .tally_percentcontainer .tallygroupheader .headerimage {
            font-size: 1.6vw;
            font-weight: 800;
            color: #fff;
        }

    .tally_percentcontainer .tallygroupvalue {
        width: 2.2vw;
        height: 2.2vw;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1.2vw;
        color: #fff;
        position: absolute;
        top: -.6rem;
        right: 0rem;
        z-index: 100;
        border-radius: .5em;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_percentcontainer .valueall {
        background-color: var(--intense);
    }

    .tally_percentcontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_percentcontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_percentcontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_percentcontainer .tallygroupheader.yourestimate {
        background-color: var(--lookatme);
        width: 5vw;
        height: 5vw;
    }

    .tally_percentcontainer .yourpendingestimate {
        background-color: var(--mildlyintrigued);
        width: 5vw;
        height: 5vw;
    }

    .tally_percentcontainer .stats {
        display: grid;
        width: 100%;
        align-items: center;
        text-align: center;
        place-items: center;
        position: relative;
    }

    .tally_percentcontainer .statsgroups {
        display: grid;
        grid-template-columns: repeat(2,12ch);
        color: var(--whatever);
    }

    .tally_percentcontainer .statgroup {
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2,auto);
    }

    .tally_percentcontainer .stattitle {
        text-align: right;
        font-weight: 600;
    }

    .tally_percentcontainer .statvalue {
        text-align: left;
        color: #444;
    }

    .tally_percentcontainer .percentcontainer button {
        height: 2.4rem;
        width: 6.4rem;
        background-color: #fff;
        border: .1rem solid var(--alsoran);
        color: var(--alsoran);
        border-radius: .5rem;
        position: absolute;
        top: 8rem;
        outline: none;
        font-size: 1rem;
        cursor: pointer;
    }

        .tally_percentcontainer .percentcontainer button:hover {
            background-color: #444;
            color: #fff;
        }

    .tally_percentcontainer .percentcontainer .increase {
        right: unset;
        left: 51%;
    }

    .tally_percentcontainer .percentcontainer .decrease {
        left: unset;
        right: 51%;
    }

@media screen and (orientation:portrait) {
    .tally_percentcontainer .tallycontainer {
        display: grid;
        grid-template-columns: repeat(5,auto);
        grid-row-gap: 1rem;
        align-items: center;
        place-items: center;
        margin: .2em;
        z-index: 1;
        font-size: calc(100vw /45.46);
    }

    .tally_percentcontainer .tallygroupvalue {
        width: 1.4rem;
        height: 1.4rem;
        align-items: center;
        font-size: .8rem;
        top: -1rem;
        right: 0rem;
        border-radius: .4rem;
        border: .1rem solid #ccc;
    }

    .tally_percentcontainer .tallygroupheader {
        height: 10vw;
        margin-bottom: 1rem;
    }

        .tally_percentcontainer .tallygroupheader.someonesestimate {
            width: 10vw;
            height: 10vw;
        }

        .tally_percentcontainer .tallygroupheader .headerimage {
            font-size: 3.2vw;
            font-weight: 800;
        }

        .tally_percentcontainer .tallygroupheader.yourestimate {
            width: 10vw;
            height: 10vw;
        }

    .tally_percentcontainer .yourpendingestimate {
        width: 10vw;
        height: 10vw;
    }

    .tally_percentcontainer .stats {
        font-size: 1.2rem;
    }
}







/*BUS or LUS ----------------------------------------------------------*/

.buscontainer {
}

    .buscontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3,28vw);
        grid-gap: 3vw;
    }

    .buscontainer .box {
        height: 14vw;
        width: 28vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20vw;
        border-radius: 2vw;
    }

        .buscontainer .box:hover {
            /*border: .3rem solid #777;*/
            background-color: var(--mildlyintrigued);
        }



    .buscontainer .big {
        background-image: url('../images/big.svg');
    }

    .buscontainer .unknown {
        background-image: url('../images/unknown.svg');
    }

    .buscontainer .small {
        background-image: url('../images/small.svg');
    }

    .buscontainer .votedfor {
        background-color: var(--lookatme);
    }

.tally_buscontainer {
    display: grid;
    grid-template-columns: repeat(3,auto);
    align-items: center;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
}

    .tally_buscontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_buscontainer .tallygroupheader {
        margin: .5em;
        width: 8em;
        height: 6em;
        display: grid;
        align-items: center;
        place-items: center;
        border-bottom: .8rem solid #ffffff;
    }

        .tally_buscontainer .tallygroupheader img {
            height: 100%;
            width: 100%;
        }

    .tally_buscontainer .tallygroupvalue {
        width: 2em;
        height: 2em;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1em;
        color: #fff;
        position: absolute;
        top: .3rem;
        right: -.3rem;
        z-index: 100;
        border-radius: .5em;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_buscontainer .valueall {
        background-color: var(--intense);
    }

    .tally_buscontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_buscontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_buscontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_buscontainer .yourestimate {
        border-bottom: .8rem solid var(--lookatme);
    }

    .tally_buscontainer .yourpendingestimate {
        border-bottom: .8rem solid var(--mildlyintrigued);
    }

    .tally_buscontainer .availablestimate:hover {
        border-bottom: .8rem solid var(--whatdoyouwant);
        cursor: pointer;
    }

@media screen and (orientation:portrait) {
    .buscontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,40vw);
        grid-gap: 3vw;
    }

    .buscontainer .box {
        height: 20vw;
        width: 40vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30vw;
        border-radius: 4vw;
    }

    .tally_buscontainer {
        display: grid;
        grid-template-columns: repeat(1,40vw);
        align-items: center;
        justify-content: center;
        margin: .2em;
        z-index: 1;
        font-size: calc(100vw /45.46);
    }

    .buscontainer .votedfor {
        background-color: var(--lookatme);
    }

    .tally_buscontainer .tallygroupheader {
        margin: .5em;
        width: 40vw;
        height: 20vw;
        display: grid;
        align-items: center;
        place-items: center;
        background-size: 30vw;
        border-bottom: .8rem solid #ffffff;
    }

    .tally_buscontainer .tallygroupvalue {
        width: 2.6rem;
        height: 2.6rem;
        align-items: center;
        font-size: .8rem;
        top: -.4rem;
        right: -1.8rem;
        border-radius: .4rem;
        border: .1rem solid #ccc;
    }
}







/*Zero To Four ----------------------------------------------------------*/

.zerotofourcontainer {
}

    .zerotofourcontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5,15vw);
        grid-gap: 3vw;
    }

    .zerotofourcontainer .box {
        height: 15vw;
        width: 15vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 12vw;
        border-radius: 50%;
    }

        .zerotofourcontainer .box:hover {
            /*border: .3rem solid #777;*/
            background-color: var(--mildlyintrigued);
        }



    .zerotofourcontainer .z4-zero {
        background-image: url('../images/04-0.svg');
    }

    .zerotofourcontainer .z4-one {
        background-image: url('../images/04-1.svg');
    }

    .zerotofourcontainer .z4-two {
        background-image: url('../images/04-2.svg');
    }

    .zerotofourcontainer .z4-three {
        background-image: url('../images/04-3.svg');
    }

    .zerotofourcontainer .z4-four {
        background-image: url('../images/04-4.svg');
    }

    .zerotofourcontainer .votedfor {
        background-color: var(--lookatme);
    }

.tally_zerotofourcontainer {
    display: grid;
    grid-template-columns: repeat(5,auto);
    align-items: center;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
}

    .tally_zerotofourcontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_zerotofourcontainer .tallygroupheader {
        margin: .2em;
        width: 5em;
        height: 5em;
        display: grid;
        align-items: center;
        place-items: center;
        border-bottom: .4rem solid #ffffff;
    }

        .tally_zerotofourcontainer .tallygroupheader img {
            height: 100%;
            width: 100%;
        }

    .tally_zerotofourcontainer .tallygroupvalue {
        width: 2em;
        height: 2em;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1em;
        color: #fff;
        position: absolute;
        top: -.8rem;
        right: 0rem;
        z-index: 100;
        border-radius: .5em;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_zerotofourcontainer .valueall {
        background-color: var(--intense);
    }

    .tally_zerotofourcontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_zerotofourcontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_zerotofourcontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_zerotofourcontainer .yourestimate {
        border-bottom: .4rem solid var(--lookatme);
    }

    .tally_zerotofourcontainer .yourpendingestimate {
        border-bottom: .4rem solid var(--mildlyintrigued);
    }

    .tally_zerotofourcontainer .availablestimate:hover {
        border-bottom: .4rem solid var(--whatdoyouwant);
        cursor: pointer;
    }

@media screen and (orientation:portrait) {
    .tally_zerotofourcontainer .tallycontainer {
        display: grid;
        grid-template-columns: repeat(5,auto);
        grid-row-gap: 1rem;
        align-items: center;
        place-items: center;
        margin: .2em;
        z-index: 1;
        font-size: calc(100vw /45.46);
    }

    .tally_zerotofourcontainer .tallygroupvalue {
        width: 1.6rem;
        height: 1.6rem;
        align-items: center;
        font-size: .8rem;
        top: -.8rem;
        right: .2rem;
        border-radius: .4rem;
        border: .1rem solid #ccc;
    }
}










/*Fist Of Five ----------------------------------------------------------*/

.fistoffivecontainer {
}

    .fistoffivecontainer .start {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6,12vw);
        grid-gap: 3vw;
    }

    .fistoffivecontainer .box {
        height: 12vw;
        width: 12vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10vw;
        border-radius: 50%;
    }

        .fistoffivecontainer .box:hover {
            /*border: .3rem solid #777;*/
            background-color: var(--mildlyintrigued);
        }



    .fistoffivecontainer .fist5-zero {
        background-image: url('../images/fist0.svg');
    }

    .fistoffivecontainer .fist5-one {
        background-image: url('../images/fist1.svg');
    }

    .fistoffivecontainer .fist5-two {
        background-image: url('../images/fist2.svg');
    }

    .fistoffivecontainer .fist5-three {
        background-image: url('../images/fist3.svg');
    }

    .fistoffivecontainer .fist5-four {
        background-image: url('../images/fist4.svg');
    }

    .fistoffivecontainer .fist5-five {
        background-image: url('../images/fist5.svg');
    }

    .fistoffivecontainer .votedfor {
        background-color: var(--lookatme);
    }

.tally_fistoffivecontainer {
    display: grid;
    grid-template-columns: repeat(6,13vw);
    align-items: center;
    margin: .2em;
    z-index: 1;
    font-size: calc(100vw /45.46);
}

    .tally_fistoffivecontainer .tallygroup {
        margin: .2em;
        align-items: flex-start;
        position: relative;
    }

    .tally_fistoffivecontainer .tallygroupheader {
        margin: .2em;
        /* width: 5em;
        height: 5em;*/
        display: grid;
        align-items: center;
        place-items: center;
        border-bottom: .4rem solid #ffffff;
    }

        .tally_fistoffivecontainer .tallygroupheader img {
            height: 100%;
            width: 100%;
        }

    .tally_fistoffivecontainer .tallygroupvalue {
        width: 2em;
        height: 2em;
        margin: .2em;
        display: grid;
        align-items: center;
        place-items: center;
        font-size: 1em;
        color: #fff;
        position: absolute;
        top: -.8rem;
        right: 0rem;
        z-index: 100;
        border-radius: .5em;
        border: .1em solid #ccc;
        background-color: #888;
        font-weight: bold;
        visibility: visible;
    }

    .tally_fistoffivecontainer .valueall {
        background-color: var(--intense);
    }

    .tally_fistoffivecontainer .valuemajority {
        background-color: var(--passionate);
    }

    .tally_fistoffivecontainer .valuepopular {
        background-color: var(--mildlyintrigued);
    }

    .tally_fistoffivecontainer .valuenone {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1.0s, opacity 1.0s linear;
    }

    .tally_fistoffivecontainer .yourestimate {
        border-bottom: .4rem solid var(--lookatme);
    }

    .tally_fistoffivecontainer .yourpendingestimate {
        border-bottom: .4rem solid var(--mildlyintrigued);
    }

    .tally_fistoffivecontainer .availablestimate:hover {
        border-bottom: .4rem solid var(--whatdoyouwant);
        cursor: pointer;
    }

@media screen and (orientation:portrait) {

    .fistoffivecontainer .start {
        /*height: 100%;
        width: 100%;*/
        display: grid;
        grid-template-columns: repeat(2,32vw);
        grid-gap: 3vw;
    }

    .fistoffivecontainer .box {
        height: 27vw;
        width: 27vw;
        background-color: #fff;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 50%;
    }

    .fistoffivecontainer .votedfor {
        background-color: var(--lookatme);
    }

    .tally_fistoffivecontainer {
        display: grid;
        grid-template-columns: repeat(2,32vw);
        grid-row-gap: 3vw;
        align-items: center;
        place-items: center;
        margin: auto;
        width: fit-content;
        z-index: 1;
        font-size: calc(100vw /45.46);
    }

        .tally_fistoffivecontainer .tallygroup {
            margin: 0;
        }

        .tally_fistoffivecontainer .tallygroupheader {
            width: 27vw;
            height: 27vw;
            display: block;
        }

        .tally_fistoffivecontainer .tallygroupvalue {
            width: 1.6rem;
            height: 1.6rem;
            align-items: center;
            font-size: .8rem;
            top: -.5vw;
            right: 5vw;
            border-radius: .4rem;
            border: .1rem solid #ccc;
        }
}