#viewPortWrapper {
    clear: left
}

#viewPort {
    background-color: #6babed;
    width: 960px;
    height: 625px;
    position: relative;
    margin: 0 auto;
    overflow: hidden
}

#viewPortWrapper.fullscreen {
    display: table;
    width: 100%;
    height: 100%
}

#viewPortWrapper.fullscreen #viewPortCell {
    background-color: #000;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0;
    touch-action: none
}

.closeButton {
    position: absolute;
    top: .7408%;
    right: .4832%;
    width: 4.9458%;
    height: 7.5926%;
    cursor: pointer;
    z-index: 21
}

.closeButton img {
    pointer-events: none
}

#viewPort p {
    margin: .5em 0
}

#viewPort h2 {
    color: #222;
    font: 32px/1.3em samim;
    font-size: 32px;
    line-height: 1.3em;
    margin: 0;
    padding: 0
}


#splashTitle h1 {
    color: #fff;
    font: 64px/1.1em samim;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 2.56%;
    z-index: 20;
    width: 100%
}

#splashTitle h1.shadow {
    color: #d4145a;
    top: 2.88%;
    left: .208%;
    z-index: 10
}

#splashChart {
    border: 12px solid #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: absolute;
    top: 32%;
    left: 4%;
    width: 37.08%;
    height: 49.76%
}

#options {
    color: #fff;
    font: 28px/1.4em samim;
    position: absolute;
    top: 19%;
    left: 47%;
    width: 49.625%;
    text-align: center
}

#options ul {
    float: left;
    width: 100%
}

#options ul,
#subOptions ul {
    list-style: none;
    margin: 0;
    padding: 0
}

#options ul li {
    float: left;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border-width: 3px;
    border-style: solid;
    padding: 1% 5.18% 1%;
    cursor: pointer
}

#options ul li.option2 {
    float: right
}

.option1 {
    background-color: #d6573d;
    border-color: #ad351a
}

.hasHover .option1:hover {
    background-color: #bd4128;
    border-color: #922d16
}

.option2 {
    background-color: #a83dd6;
    border-color: #8d1cba
}

.hasHover .option2:hover {
    background-color: #9128bd;
    border-color: #7d19a4
}

#subOptions {
    background-color: #3c88d6;
    border: 3px solid #2466a8;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 30%;
    left: 47%;
    width: 49%;
    height: 58%;
    text-align: center
}

#subOptions>div {
    padding: 1.75%
}

#subOptions h2 {
    color: #fff;
    font-size: 23px;
    line-height: 1.8em
}

#subOptions h3 {
    color: #226;
    font: 22px/1.8em samim;
    margin: 1.5% 0
}

#subOptions .subCol {
    float: left;
    margin: 0 3%;
    width: 44%
}

#subOptions ul {
    color: #fff;
    font: 23px/1.1em samim;
    padding: 1% 0
}

.ordering #subOptions ul {
    padding: 1% 0
}

#subOptions ul li {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border-style: solid;
    margin: 4% 0 0;
    padding: 4% 6% 2%;
    cursor: pointer
}

#chooseLocale {
    position: absolute;
    left: 47%;
    top: 91.6%;
    width: 40%;
    height: 5.76%
}

#chooseLocale h2 {
    color: #000;
    font-size: 24px;
    line-height: 1.4em
}

#chooseLocale img {
    position: absolute;
    top: 0;
    width: 18.75%
}

#flagGB {
    left: 30%
}

#flagUS {
    left: 58%
}

#game {
    float: left;
    width: 100%;
    height: 100%
}

.button {
    color: #fff;
    font: 22px/1em samim;
    background-color: #3c88d6;
    border: 3px solid #1a62ad;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: .4% 1.5%;
    text-align: center;
    cursor: pointer
}

.hasHover .button:hover {
    background-color: #1d4c7c;
    border-color: #103358
}

#backHome {
    position: absolute;
    display: inline;
    top: 1.28%;
    left: .833%
}

.score {
    color: #fff;
    font: 20px samim !important;
    position: absolute;
    top: 2%;
    right: 6.5%;
    text-align: right
}

#buttonGrid {
    float: left;
    font-size: 24px;
    list-style: none;
    position: absolute;
    left: 5%;
    top: 12%;
    width: 90%;
    height: 60%;
    margin: 0;
    padding: 0
}

#buttonGrid div {
    border-width: 3px;
    border-style: solid
}

#buttonGrid.rows2,
#buttonGrid.rows3 {
    font-size: 32px;
    line-height: 2.608em
}

#buttonGrid.rows2>li {
    margin: 8% 0 0
}

#buttonGrid.rows3>li {
    margin: 4% 0 0
}

#buttonGrid.rows4>li {
    margin: 2% 0 0
}

#buttonGrid.rows4 {
    font-size: 26px;
    line-height: 2.636em;
    margin-top: -1%
}

#buttonGrid.rows5 {
    margin-top: -1.5%
}

#buttonGrid.rows5>li {
    margin: 1.5% 0 0
}

#buttonGrid.rows5 .pvButtons li div {
    line-height: 2.08em
}

#buttonGrid.rows5 .pvButtons li:after {
    padding-top: 80%
}

#buttonGrid.rows6 {
    font-size: 20px;
    line-height: 2.25em;
    margin-top: -1.5%
}

#buttonGrid.rows6>li {
    margin: 1% 0 0
}

#buttonGrid.rows6 .pvButtons li:after {
    padding-top: 70%
}

#buttonGrid>li {
    clear: left;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0
}

.pvButtons {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}

.pvButtons li {
    cursor: pointer;
    float: left;
    width: 8.97%;
    margin: 0 2.4% 0 0;
    position: relative
}

.pvButtons li:last-child {
    margin-right: 0
}

.pvButtons li:after {
    padding-top: 100%;
    display: block;
    content: ''
}

#buttonGrid div.selected {
    color: #000;
    background-color: rgb(255, 255, 255) !important;
    border-color: #000 !important;
    text-shadow: none !important
}

#buttonGrid .row1 div {
    background-color: #79c928;
    border-color: #1aad48;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1)
}

.hasHover #buttonGrid .row1 div:hover {
    background-color: #67b21c;
    border-color: #17973f
}

#buttonGrid .row2 div {
    background-color: #a83dd6;
    border-color: #8d1cba
}

.hasHover #buttonGrid .row2 div:hover {
    background-color: #9128bd;
    border-color: #7d19a4
}

#buttonGrid .row3 div {
    background-color: #e1c32a;
    border-color: #ad971a;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1)
}

.hasHover #buttonGrid .row3 div:hover {
    background-color: #c5a815;
    border-color: #9b8717
}

#buttonGrid .row4 div {
    background-color: #d63d8a;
    border-color: #ad1a61
}

.hasHover #buttonGrid .row4 div:hover {
    background-color: #bd2873;
    border-color: #921652
}

#buttonGrid .row5 div {
    background-color: #d6573d;
    border-color: #ad351a
}

.hasHover #buttonGrid .row5 div:hover {
    background-color: #bd4128;
    border-color: #922d16
}

#buttonGrid .row0 div,
#buttonGrid .row6 div {
    background-color: #3c88d6;
    border-color: #2466a8
}

.hasHover #buttonGrid .row0 div:hover,
.hasHover #buttonGrid .row6 div:hover {
    background-color: #2873bd;
    border-color: #1d548b
}

.pvButtons li div {
    color: #fff;
    font-family: samim;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px
}

#question {
    color: #000;
    font: 32px/1.3em samim;
    text-align: center;
    position: absolute;
    top: 1.5%;
    left: 8.5%;
    width: 80%
}

#sum {
    background-color: #82c3ff;
    border: 6px solid #3c88d6;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #3c88d6;
    font: 30px/1.1em samim;
    position: absolute;
    top: 76%;
    left: 4.7%;
    width: 89%;
    padding: .5% 0;
    text-align: center
}

#sum>span {
    width: 100%
}

#sum>span>span {
    border: 3px solid transparent;
    color: #fff;
    font-size: 120%;
    line-height: 120%;
    text-shadow: 1px 1px 2px rgba(50, 50, 50, 1);
    display: inline-block
}

#sum span.total {
    color: #000;
    text-shadow: none;
    width: 18%
}

#sum>span.sumButton {
    color: #fff;
    font-size: 120%;
    background-color: #3c88d6;
    border: 3px solid #1a62ad;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    padding: 0;
    text-align: center;
    cursor: pointer;
    width: 18%
}

.hasHover #sum>span.sumButton:hover {
    background-color: #1d4c7c;
    border-color: #103358
}

#sum>span.sumButton#checkAnswer {
    font-size: 30px;
    padding: .5% 0 0
}

#sum td div {
    margin-left: 6%;
    width: 86%
}

.message {
    background-color: rgb(255, 255, 255);
    border: 3px solid #333;
    color: #333;
    font: 30px/1.25em samim;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: .6% 2%;
    position: absolute;
    text-align: center
}

#tryAgain {
    top: 35%;
    left: 35%;
    width: 25%
}

#wellDone {
    top: 35%;
    left: 24.8%;
    width: 46%
}


#toggleValueButton,
#checkButton {
    position: absolute;
    top: 24%;
    left: 0;
    width: 25%
}

.resetButton {
    position: absolute;
    bottom: 2%;
    left: 4.7%;
    width: 12%
}