*{
margin: 0px;
padding: 0px;
}
html, body{
height: 100vh !important;
width: 100vw !important;
overflow: hidden;
scroll-behavior: smooth;
margin: 0px;
padding: 0px;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
background-color: #4aceda;
}
.cd-header{
position: fixed;
display: flex;
width:100%;
top:0;
left:0;
z-index:999;
} 
.header-wrapper{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 1% 1.5% 1% 1%;
} 
.logo-wrap {
display:flex; left:0;
cursor: pointer;
}
.nav-but-wrap{ 
display: flex; justify-content: right;
align-items: center;
transition : all 0.3s ease-out;
}
.logo-wrap a {
cursor: pointer;
font-family: 'Poppins';
font-weight: 900;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
transition : all 0.3s ease-out;
}
.logo-wrap a span{ 
color: #8167a9;
}
.logo-wrap a:hover {
opacity: 0.9;
}
.logo{
max-width: 25vmin;
height: auto;
}
.menu-icon {
height: 4vmin;
width: 4vmin;
z-index: 2;
cursor: pointer;
display: block;
transform: scale(0.8);
}
.menu-icon__line {
height: 2px;
width: 4vmin;
display: block;
background-color: #444;
margin-bottom: 1vmin;
cursor: pointer;
-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
transition: background-color .5s ease, -webkit-transform .2s ease;
transition: transform .2s ease, background-color .5s ease;
transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
width: 2.2vmin;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu-icon__line-right {
width: 2.2vmin;
float: right;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
width: 2.2vmin;
}
.nav {
position: fixed;
z-index: 998;
}
.nav:before, .nav:after {
content: "";
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(250, 209, 65, 0.6);
border-bottom-left-radius: 200%;
z-index: 998;
-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
-webkit-transform: translateX(100%) translateY(-100%);
transform: translateX(100%) translateY(-100%);
}
.nav:after {
background: rgba(74, 206, 218, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.nav:before {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.nav__content {
position: fixed;
visibility: hidden;
top: 50%; -webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
width: 100%;
text-align: center;
z-index: 999;
}
.nav__list {
position: relative;
padding: 0;
margin: 0; }
.nav__list-item {
position: relative;
display: block;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
text-align: center;
color: #fff;
overflow: hidden; 
font-family: 'Poppins';
font-size: 5.65vmin;
font-weight: 900;
line-height: 1.2;
letter-spacing: 3px;
-webkit-transform: translate(100px, 0%);
transform: translate(100px, 0%);
-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, transform .3s ease;
transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
margin-top: 0;
margin-bottom: 0;
}
.nav__list-item a{ 
position: relative;
text-decoration: none;
color: rgba(0,0,0,0.2);
overflow: hidden; 
cursor: pointer; z-index: 999;
display: inline-block;
text-transform: uppercase;
-webkit-transition: all 200ms linear;
transition: all 200ms linear; 
}
.nav__list-item a:after{ 
position: absolute;
content: '';
top: 50%;
margin-top: -2px;
left: 50%;
width: 0;
height: 0;
opacity: 0;
background-color: #c22e2e;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear; 
}
.nav__list-item a:hover:after{ 
height: 4px;
opacity: 1;
left: 0;
width: 100%;
}
.nav__list-item a:hover{
color: rgba(0,0,0,1);
}
.nav__list-item.active-nav a{
color: rgba(255,255,255,1);
}
.nav__list-item.active-nav a:after{ 
height: 4px;
opacity: 1;
left: 0;
width: 100%;
}
body.nav-active .nav__content {
visibility: visible;
}
body.nav-active .menu-icon__line {
background-color: #fff;
-webkit-transform: translate(0px, 0px) rotate(-45deg);
transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
width: 1.8vmin;
-webkit-transform: translate(0.3vmin, 0.5vmin) rotate(45deg);
transform: translate(0.3vmin, 0.5vmin) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 1.8vmin;
float: right;
-webkit-transform: translate(-0.3vmin, -0.45vmin) rotate(45deg);
transform: translate(-0.3vmin, -0.45vmin) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 1.8vmin;
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
border-radius: 0;
}
body.nav-active .nav:after {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
body.nav-active .nav:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(1) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(2) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(3) {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(4) {
-webkit-transition-delay: 1.1s;
transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(5) {
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(6) {
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(7) {
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
-webkit-transition-delay: 1.6s;
transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
-webkit-transition-delay: 1.7s;
transition-delay: 1.7s;
}
.footerDiv{
width: 100%;
bottom: 0;
position: fixed;
display: flex;
flex-direction: row;
padding: 0.5vmax 0 0.5vmax 1.25vmax;
}
.footerItems{
display: flex;
flex-direction: row;
}
.social-icons {
list-style: none;
}
.social-icon {
color: #444;
}
.social-icons li {
display: inline;
margin: 0.2vmax;
}
.social-icons a {
color: #444;
text-decoration: none;
}
.fa-facebook-f, .fa-instagram, .fa-whatsapp {
padding: 0.65vmax;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-facebook-f:hover, .fa-instagram:hover, .fa-whatsapp:hover {
background-color: #af0001;
color: white;
border-radius: 100px;
}
.mainSec{
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.coursesDiv{
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
}
#homeDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#aboutDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whoDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-who-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#storyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/contact-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#coursesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#regDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bb-hc-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#specialDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-ls-rs-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#contactDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/contact-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#formDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesListDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bb-hc-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#eventDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#galleryDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#photosDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-ls-rs-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.taglineDiv{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.mqtextDiv{
width: 100%;
display: flex;
justify-content: center;
align-content: center;
margin: -0.5% 0;
font-family: "Poppins";
font-size: 5vmax;
font-weight: bolder;
color: #252525;
}
.mqtextDivPages{
width: 100%;
display: flex;
justify-content: center;
align-content: center;
margin: 0.15% 0;
font-family: "Poppins";
font-size: 5vmax;
font-weight: bolder;
color: #252525;
}
.mqPageTitle{
font-family: "Poppins";
font-size: 5vmax;
font-weight: 800;
color: #252525;
text-shadow: 0 10px 19px rgba(0, 0, 0, 0.2);
}
.actnBtnsDiv, .actnBtnsHomeDiv{
width: 100%;
display: flex;
justify-content: center;
align-content: center;
margin: 1% 0 2% 0;
}
.actnBtn, .actnBtnHome{
border-radius: 2vmax;
padding: 1.5vmin 3.5vmin;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 0.75vmax;
font-family: "Poppins";
font-size: 1vmax;
line-height: 1.25vmax;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
cursor: pointer;
z-index: 99;
}
.actnBtn a, .actnBtnHome a{
text-decoration: none;
color: white;
padding: 0.5vmax 0;
}
.blink {
color: #bdbdbd;
font-weight: 300;
animation: blink 0.75s infinite;
}
.flash{
color: #4aceda;
}
.headlineText{
width: 60%;
font-family: "Poppins";
font-size: 0.9vmax;
color: #252525;
font-weight: 600;
}
.boxesGrpDiv{
display: flex;
flex-direction: row;
width: 60%;
margin: 1%;
justify-content: space-between;
}
.horBox {
width: calc(100%/3);
margin: 0 1vmin;
background-color: white;
border-radius: 0.8vmax;
display: flex;
flex-direction: row;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 25px 80px rgba(0, 0, 0, 0.12);
padding: 1.5% 2.2%;
cursor: pointer;
}
.boxesGrpDivMob, .horBoxMob, .boxImgMob, .dotsMob, .whyUsDivMob{
display: none;
}
.boxImg{
width: 50%;
margin-right: 1vmax;
}
.boxImg img{
max-width: 100%;
height: auto;
}
.boxTextDiv{
display: flex;
flex-direction: column;
}
.boxHeadline{
font-family: "Poppins";
font-size: 0.85vmax;
font-weight: 500;
color: #444444;
}
.boxText{
font-family: "Poppins";
font-size: 0.75vmax;
font-weight: 400;
color: #7a7a7a;
}
@keyframes blink{
to { opacity: .0; }
}
.creditDiv{
font-family: "Poppins";
font-size: 0.6vmax;
position: absolute;
left: -3vw;
transform: rotateZ(-90deg);
}
.creditDiv a{
text-decoration: none;
color: #af0001;
}
.mqSubtextDiv{
width: 60%;
text-align: center;
font-family: "Poppins";
font-size: 2vmin;
color: #7a7a7a;
line-height: 1.5;
}
.imgDiv{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: space-between;
}
.imgDivSingle{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: center;
}
#abt-left-hand, #abt-right-hand, #abt-center-hand, #courses-left-hand, #courses-right-hand, #courses-left-bottom-hand, #courses-right-bottom-hand, 
#gallery-left-hand, #gallery-right-hand, #contact-left-hand, #contact-right-hand, #games-right-hand, #games-left-hand{
position: absolute;
transform-origin: center center;
image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast;   image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }
.imgDivMob, .imgDivSingleMob{
display: none;
}
#abt-left-hand-t, #abt-right-hand-t, #abt-center-hand-t, #courses-left-hand-t, #courses-right-hand-t, #courses-left-bottom-hand-t, #courses-right-bottom-hand-t, 
#gallery-left-hand-t, #gallery-right-hand-t, #contact-left-hand-t, #contact-right-hand-t, #games-right-hand-t, #games-left-hand-t{
display: none;
}
#abt-left-hand img, #abt-right-hand img, #abt-center-hand img, #courses-left-hand img, #courses-right-hand img, #courses-left-bottom-hand img, #courses-right-bottom-hand img, 
#gallery-left-hand img, #gallery-right-hand img, #contact-left-hand img, #contact-right-hand img, #games-right-hand img, #games-left-hand img{
max-width: 100%;
}
#abt-left-hand{
max-width: 25%;
left: -2vw;
top: -25vh;
}
#abt-right-hand{
max-width: 25%;
right: -1vw;
top: -25vh;
}
#abt-center-hand{
max-width: 33%;
top: 1.5vh;
}
#courses-left-hand{
max-width: 17%;
left: 0;
}
#courses-right-hand{
max-width: 15%;
right: 0;
}
#courses-left-bottom-hand{
max-width: 16%;
left: 22vw;
top: -2vh;
}
#courses-right-bottom-hand{
max-width: 16%;
right: 22vw;
top: -2vh;
}
#gallery-left-hand{
max-width: 18%;
top: -12vh;
left: 15vw;
} 
#gallery-right-hand{
max-width: 26%;
bottom: 25vh;
right: 12vw;
}
#contact-left-hand{
max-width: 22%;
bottom: -20vh;
left: -2vw;
}
#contact-right-hand{
max-width: 22%;
bottom: -20vh;
right: -2vw;
}
#games-left-hand{
max-width: 20%;
left: 2vw;
top: -15vh;
}
#games-right-hand{
max-width: 20%;
right: 1vw;
top: -15vh;
}
.upcomingText{
font-family: "poppins";
font-size: 1.5vmin;
font-weight: 500;
color: #4aceda;
letter-spacing: 3px;
text-transform: uppercase;
}
.eventTitle{
font-family: "Poppins";
font-size: 5vmin;
font-weight: 700;
color: #444444;
text-align: center;
}
.eventSubtextDiv{
font-family: "Poppins";
font-size: 1.5vmin;
font-weight: 500;
color: #7a7a7a;
}
.eventTimer{
display: flex;
width: 100%;
flex-direction: row;
margin: 4vmin 0;
justify-content: center;
font-size: 2vmin;
font-family: "Poppins";
color: #444;
font-weight: 500;
}
.timeBox{
display: flex;
flex-direction: column;
width: 15vmin;
height: 13vmin;
background-color: white;
border-radius: 0.75vmax;
border: #4aceda 3px solid;
margin: 0 1vmin;
justify-content: center;
align-items: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.timerNo{
font-family: "Poppins";
font-size: 5vmin;
font-weight: 700;
color: #444;
line-height: 1.2;
}
.timerText{
font-family: "Poppins";
font-size: 2vmin;
font-weight: 500;
color: #4aceda;
}
.navDiv{
width: 6.5vmin;
position: fixed;
right: 0;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navDots{
font-family: "Poppins";
font-size: 3vmin;
font-weight: 800;
color: #444;
cursor: pointer;
line-height: 1.25vmax;
text-align: center;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
}
.navDotsa{
text-decoration: none;
color: #444;
}
.navDots .tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
}
.navDots:hover .tooltiptext {
visibility: visible;
background-color: #4aceda;
color: #fff;
font-family: "Poppins";
font-size: 1.5vmin;
font-weight: 400;
text-align: center;
padding: 0.5vmin 0.9vmin;
right: 2.5vmax;
white-space: nowrap;
}
.subPageDiv{
display: flex;
flex-direction: row;
width: 70%;
height: 100%;
justify-content: center;
}
.subPageleftDiv{
width: 72%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 1.5vmin;
}
.subPageRightDiv{
width: 28%;
display: flex;
align-items: center;
}
.subPageRightDiv img{
max-width: 100%;
}
.subPageTitle{
font-family: "Poppins";
font-size: 3.5vmin;
font-weight: 700;
color: #444;
line-height: 2;
text-align: left;
}
.subPageContent{
width: 80%;
text-align: center;
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 400;
color: #7a7a7a;
line-height: 1.65;
}
.subPageContentLeft{
width: 100%;
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 400;
color: #7a7a7a;
line-height: 1.65;
}
.subPageContentLeft p{
padding: 1vmin 0;
}
.subPageBoxLeft{
width: 88%;
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 400;
color: #7a7a7a;
line-height: 1.65;
padding: 1vmin 0;
}
.subPageActnBtnsDiv{
display: flex;
width: 100%;
margin: 1.5vmax 0;
}
.subPageBtn{
border-radius: 2vmax;
padding: 1vmin 3vmin;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 1vmax 0 0;
font-family: "Poppins";
font-size: 1.5vmin;
line-height: 1.25vmax;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
cursor: pointer;
line-height: 1.5;
}
.subPageBtn a{
text-decoration: none;
color: white;
}
.subPageBtn:focus, .actnBtn:focus, .actnBtnHome:focus{
outline: none;
}
.actnBtn:hover, .subPageBtn:hover, .actnBtnHome:hover, .actnBtnContent:hover{
background-color: #4aceda;
color: white;
}
.actnBtn a:hover, .subPageBtn a:hover, .actnBtnHome a:hover, .actnBtnContent a:hover{
color: white;
}
#whyUsBoxesTab{
width: 60%;
table-layout: auto;
border-collapse: separate;
border-spacing: 1.5vmin;
}
#whyUsBoxesTab td{
width: calc(100%/3);
padding: 0;
border: none;
}
#whyUsBoxesTab tr:nth-child(odd), #whyUsBoxesTab tr:nth-child(even), #whyUsBoxesTab tbody tr:hover>td, #whyUsBoxesTab tbody>tr:nth-child(odd)>td, #whyUsBoxesTab tbody>tr:nth-child(odd)>th {background-color: white;}
.whyUsBox{
display: flex;
height: 18vmin;
flex-direction: column;
background-color: transparent;
perspective: 1000px;
justify-content: center;
align-items: center;
margin: 1vmin;
}
.whyUsBox .card{
position: absolute;
height: 100%;
width: 100%;
background: #4aceda;
border-radius: 1.2vmax;
transform: translateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
transition: transform 1s cubic-bezier(0.4,0.2,0.2,1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.front-face{
font-family: "Poppins";
font-size: 0.85vmax;
color: white;
font-weight: 500;
text-transform: uppercase;
padding: 20%;
}
.cardImg{
display: flex;
justify-content: center;
align-items: center;
}
.cardImg img{
max-width: 100%;
margin-bottom: 0.75vmax;
transform: scale(0.7);
filter: invert(1);
}
.whyUsBox:hover > .front-face{
transform-origin: left center;
transform: translateX(-30%) rotateY(180deg);
}
.whyUsBox .card img{
height: 100%;
width: 100%;
}
.whyUsBox .back-face{
transform-origin: right center;
background-color: #fad141;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
transform: scaleX(0) scaleY(0) translateZ(-50px) rotateY(90deg);
font-family: "Poppins";
font-size: 0.75vmax;
color: white;
font-weight: 400;
}
.whyUsBox .back-face p{
padding: 15%;
margin-bottom: 0;
}
.whyUsBox:hover > .back-face{
transform-origin: right center;
transform: scaleX(1) scaleY(1) translateZ(0) rotateY(0deg);
background-color: #fad141;
}
#gameLinks{
width: 70%;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
}
#gameLinks td{
width: auto;
text-align: center;
border: none;
padding: 0;
}
#gameLinksMob{
display: none;
}
#gameLinks tr:nth-child(odd), #gameLinks tr:nth-child(even), #gameLinks tbody tr:hover>td, #gameLinks tbody>tr:nth-child(odd)>td, #gameLinks tbody>tr:nth-child(odd)>th {background-color: white;}
#gameLinksMob tr:nth-child(odd), #gameLinksMob tr:nth-child(even), #gameLinksMob tbody tr:hover>td, #gameLinksMob tbody>tr:nth-child(odd)>td, #gameLinksMob tbody>tr:nth-child(odd)>th {background-color: white;}
.accordion {
cursor: pointer;
border: none;
outline: none;
height: 10vmax;
transition: 0.3s;
}
.accordion:hover {
transform: scale(1.05);
box-shadow: -2px 10px 15px 0 rgba(0, 0, 0, 0.08);
}
.lblGameName{
font-size: 2vmin;
font-family: "Poppins";
font-weight: 500;
color: #444;
padding: 0 8%;
word-break: break-all;
margin: 0;
}
#additn{
background-color: #ffef9f;
}
#subtrctn{
background-color: #caf7e3;
}
#divisionSec{
background-color: #dbfcff;
}
#multiplctn{
background-color: #ffef9f;
}
#sudokuSec{
background-color: #ffe9e7;
}
#mqOrig{
background-color: #a7f3fa;
}
#scrSec{
background-color: #fcb9b2;
}
#omoSec{
background-color: #fcf0f6;
}
#prcnt{
background-color: #b7f4d8;
}
#additnPanel{
background-color: #fff8d4;
}
#subtrctnPanel{
background-color: #e6fff4;
}
#divisionSecPanel{
background-color: #e9fdff;
}
#multiplctnPanel{
background-color: #fff8d4;
}
#sudokuSecPanel{
background-color: #fff6f5;
}
#scrSecPanel{
background-color: #ffedeb;
}
#omoSecPanel{
background-color: #fff7fb;
}
#prcntPanel{
background-color: #e8fff4;
}
#additn, #subtrctn, #divisionSec, #multiplctn, #omoSec, #prcnt, #scrSec, #sudokuSec{
border-radius: 1.5vmax;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin: 1vmax 0.75vmax;
box-shadow: 0px 10px 18px rgba(0,0,0,0.05);;
}
.panel {
overflow: hidden;
opacity: 0;
max-height: 0;
transition: 0.3s;
margin: -0.5vmax 3% 0 3%;
box-sizing: border-box;
width: 94%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 1.5vmax;
}
.panel.show {
opacity: 1;
max-height: 20vmax;
padding: 1.5vmax 0;
}
.lblGameOptVer{
list-style-type: none;
text-align: center;
font-size: 1vmax;
font-family: "Poppins";
font-weight: 400;
color: #252525;
padding: 0 1vmax;
line-height: 2;
}
.GameTitle{
font-size: 1.2vmax;
font-family: "Poppins";
font-weight: 500;
color: #252525;
}
.lblGameOptVer li{
text-decoration: none;
cursor: pointer;
}
.lblGameOptVer li a{
color: #444;
}
.accordionCourses {
cursor: pointer;
border: none;
outline: none;
width: 100%;
transition: 0.3s;
background-color: #F1FEFF;
border-radius: 100px;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
display: flex;
align-items: center;
margin: 2vmin 2.5vmin;
box-shadow: 0px 10px 18px rgba(0,0,0,0.05);
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 500;
color: #444;
line-height: 1.5;
}
.courseTitleDiv{
width: 100%;
display: flex;
flex-direction: row;
padding: 1.5vmin 2.5vmin;
justify-content: space-between;
align-items: center;
}
.courseTitleDiv p{
margin-bottom: 0;	
}
.subText{
font-size: 0.85vmax; 
color: #444; 
font-weight: 400;
}
.accordionCourses:hover .subText {
color: white;
}
.accordionCourses:hover .caretCourses {
border-top: 0.6vmin solid white;
}
.accordionCourses.active {
background-color: #af0001;
color: white;
}
.accordionCourses.active:hover .caretCourses {
border-top: none;
}
.accordionCourses.active .subText{
color: white;
}
.accordionCourses:hover {
transform: scale(1.02);
box-shadow: -2px 10px 15px 0 rgba(0, 0, 0, 0.08);
background-color: #4aceda;
color: white;
}
.panelCourses {
overflow: hidden;
opacity: 0;
max-height: 0;
transition: 0.3s;
margin: -1vmax 3% 0 3%;
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 1.5vmax;
}
.panelCourses.show {
opacity: 1;
max-height: 50vmin;
padding: 1.5vmax 0;
background-color: white;
box-shadow: 0px 10px 18px rgba(0,0,0,0.03);
}
.caretCourses{
width: 0;
height: 0;
border-left: 0.5vmin solid transparent;
border-right: 0.5vmin solid transparent;
border-top: 0.7vmin solid #7a7a7a;
}
.caretCourses.show{
border-top: none;
width: 0;
height: 0;
border-left: 0.5vmin solid transparent;
border-right: 0.5vmin solid transparent;
border-bottom: 0.7vmin solid white;
}
.contentDiv{
display: flex;
width: 40%;
flex-direction: column;
align-items: center;
padding: 0 0 1vmax 0;
}
.imgDivMain{
display: flex;
flex-direction: column;
width: 25%;
margin-right: 3vmin;
justify-content: center;
align-items: center;
}
.imgDivMain p{
font-family: "Poppins";
font-size: 1.5vmin;
font-weight: 500;
text-align: center;
word-spacing: 3px;
}
.imageDiv{
display: flex;
flex-flow: row wrap;
width: 100%;
height: auto;
}
.imageDiv img{
max-width: 44%;
margin: 3%;
}
.horBoxCourses{
display: flex;
width: 100%;
flex-direction: row;
}
.boxImgCourses{
width: 10%;
margin-right: 1vmax;
}
.boxImgCourses img{
max-width: 100%;
filter: hue-rotate(180deg) brightness(1.4);
}
#coursesContent{
table-layout: fixed;
width: 100%;
border: none;
}
#coursesContent td{
padding: 2% 5%;
background: white;
border: none;
}
#coursesContent tr:nth-child(odd), #coursesContent tr:nth-child(even), #coursesContent tbody tr:hover>td, #coursesContentb tbody>tr:nth-child(odd)>td, #coursesContent tbody>tr:nth-child(odd)>th {background-color: white;}
.boxTextDivCourses{
width: 90%;
display: flex;
flex-direction: column;
}
.boxHeadlineCourses{
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 500;
color: #444444;
}
.boxTextCourses{
font-family: "Poppins";
font-size: 1.65vmin;
font-weight: 400;
color: #7a7a7a;
}
.actnBtnsCoursesDiv{
width: 100%;
display: flex;
margin: 2% 0 2% 8%;
align-items: center;
}
.actnBtnContent{
border-radius: 2vmax;
padding: 0.5vmax 1.5vmax;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 0.75vmax;
font-family: "Poppins";
font-size: 0.8vmax;
line-height: 1.25vmax;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
cursor: pointer;
z-index: 1;
}
.actnBtnContent a{
text-decoration: none;
color: white;
padding: 0.5vmax 0;
}
.optDivGall{
display: flex;
flex-direction: row;
width: 60%;
justify-content: space-evenly;
margin-bottom: 2vmax;
}
.allPhotosDiv{
display: flex;
width: 60%;
height: 60%;
overflow-y: scroll;
transition: 0.3s;
}
.allPhotosDiv:hover .photoList {
filter: grayscale(1);
}
.imgDivGallery:hover .photoList{
filter: grayscale(0);
}
.photoList:hover{
transform: scale(1.05);
}
#allPhotosDiv{
display: flex;
}
#classPhotosDiv, #eventsPhotosDiv{
display: none;
}
.allPhotosDiv::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.allPhotosDiv::-webkit-scrollbar{
width: 0.45em; }
.allPhotosDiv::-webkit-scrollbar-thumb{
border-radius: 1vmax;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
} 
.photolinks{
font-family: "Poppins";
font-size: 2vmin;
text-decoration: none;
color: #444;
}
.photolinks:hover{
color: #4aceda;!important
}
.photolinks:active{
color: #af0001;!important
}
.gallery__column {
display: flex;
flex-direction: column;
width: 100%;
}
.gallery__thumb {
position: relative;
overflow: hidden;
}
.photoList{
display: block;
width: 100%;
transition: 0.3s;
cursor: pointer;
}
.imgDivGallery{
width: 98%;
margin: 1%;
}
.modal {
display: none;
position: fixed;
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.6);
}
.modal-content {
background-color: #DFFDFF70;
margin: auto;
width: 40%; border-radius: 1.2vmax;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: -2px 11px 18px 0 rgba(0, 0, 0, 0.15);
}
.modal-header{
font-family: "Poppins";
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.modal-body{
padding: 0.75vmax;
font-family: "Poppins";
height: 100%;
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modalTitle{
text-align: center;
font-weight: 500;
font-size: 1.75vmin;
margin: 0 0 0 3vmin;
}
.close {
font-family: "Poppins";
color: #7a7a7a;
float: right;
font-size: 3vmin;
border: none;
background-color: transparent;
padding: 0 1.2vmax;
}
.close:hover,
.close:focus {
color: #af0001;
text-decoration: none;
cursor: pointer;
outline: none;
background-color: transparent;
}
.modal-content-alert{
background-color: white;
margin: auto;
width: 85%;
height: auto;
border-radius: 1.2vmax;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: -2px 11px 18px 0 rgb(0 0 0 / 15%);
}
.dividerHorModal{
height: 2px;
width: 95%;
margin: 0 1vmax 0 1vmax;
background-color: rgba(0, 0, 0, 0.15);
}
.emptyDiv{
width: 100%;
height: 0.5vmax;
}
.formDiv{
width: 75%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
#gameplay{ display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: space-evenly;
flex-direction: row;
position: fixed;
}
#start{
border-radius : 50px;
width : 20vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 2.5%;
border: none;
font-size: 1.8vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
#gamestart{ position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
vertical-align: middle;
align-items: center; justify-content: center;
flex-direction: column;
}
#gameresult {
display: none;
flex-direction: row; background-color: transparent;
height: 100%;
width: 100%;
border-radius: 2vmax;
align-items: center;
justify-content: space-evenly;
font-size: 1.2vmax;
font-family: "Poppins";
font-weight: 400;
color: #252525;
text-align: center;
position: fixed;
}
.resultDiv{
width: 70%;
height: 80%;
background-color: #ffe9e7;
border-radius: 1.5vmax;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.resultsTab{
width: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.5vmax;
border: none;
}
.resultsTab td {
vertical-align: top;
padding: 0.5%;
border: none;
}
.resultsTab tr{
background-color: #ffe9e7; 
}
.leftItems {
text-align: right;
width: 48%;
}
.sep {
width: 5%;
padding: 5%;
text-align: center;
}
.resItems {
text-align: left;
}
#buttons {
display: flex;
flex-direction: row;
}
#start:focus {
outline: none;
background-color: #af0001;
color: white;
}
#start:hover {
background-color: #4aceda;
}
#rules {
text-align: center;
font-size: 1.2vmax;
font-weight: 400;
padding-top: 1.5vmax;
padding-bottom: 3vmax;
color: #444444;
padding-right: 20%;
padding-left: 20%;
}
#title {
font-size: 1.8vmax;
font-weight: 700;
}
.gameDiv{
width: 70%;
height: 80%;
text-align: center;
font-size: 1vmax;
font-weight: 600;
background-color: #fffcfe;
border-radius: 1.5vmax;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.timerDiv {
display: flex;
height: 10%;
width: 90%;
}
#timer {
width: 25%;
height: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.15vmax;
color: #656565;
text-align: right;
}
#todayTime {
width: 25%;
height: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.15vmax;
color: #656565;
text-align: left;
}
.qstnDiv{
display: flex;
width: 90%;
height: 18%;
text-align: center;
font-family: "Poppins";
font-weight: 700;
font-size: 3vmax;
color: #656565;
justify-content: center;
align-items: center;
}
.optDiv{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 40%;
width: 100%;
}
.ansOpts { 
display: flex;
border-radius: 3vmax;
width : 30vmax;
height: 6vmax;
justify-content: center;
font-family: "Poppins";
font-weight: 600;
margin: 0.25% 2% ;
border: none;
font-size: 2vmax;
color: #656565;
cursor: pointer;
background: #fad141;
box-shadow: -2px 11px 18px 0 rgba(0, 0, 0, 0.1); 
padding: 0 2vw;
}
.ansOpts:focus { 
outline: none;
}
#ansOpt1{
background-color: #e9fdff;
color: #656565;
}
#ansOpt2{
background-color: #ffef9f;
color: #656565;
}
#ansOpt3{
background-color: #ccfdd5;
color: #656565;
}
#ansOpt4{
background-color: #ffe9e7;
color: #656565;
}
#pname {
border-radius : 50px;
width : 20vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 1.8vmax;
color: #444444;
box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.2) inset;
background: #f2feff;
}
#pname::-webkit-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::-ms-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::placeholder {
color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname:focus{
outline: none;
}
.replay{
width: 15vmax;
height: 4vmax;
margin: 2vmax 0;
border-radius: 2vmax;
font-size: 1.2vmax;
font-family: "Poppins";
font-weight: 400;
color: white;
background-color: #68dadf;
border: none;
cursor: pointer;
box-shadow: -2px 11px 18px 0 rgba(0, 0, 0, 0.15); 
}
.replay:focus{
outline: none;
}
.replay:hover{
background-color: #af0001;
}
.mqlogoResult img{
max-width: 32%;
margin: 0 0 2% 0;
}
#pageTitle{
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#pageHeading, #pageHeadingM{
font-size: 1.15vmax;
font-family: "Poppins";
font-weight: 600;
color: #252525;
margin: 0;
}
#pageSubHeading, #pageSubHeadingM{
font-size: 1.15vmax;
font-family: "Poppins";
font-weight: 400;
color: #555;
margin: 0;
}
.common-btns{
display: flex;
flex-direction: column;
}
#pageTitleM{
display: none;
}
#range{
font-family: "Poppins";
text-align: center;
font-size: 1.2vmax;
font-weight: 400;
padding-top: 1.5vmax;
padding-bottom: 3vmax;
color: #444444;
padding-right: 20%;
padding-left: 20%;
}
#range p{
font-weight: 600;
margin: 1vmax 0;
}
#no1, #no2 {
border-radius : 30px;
width : 8.5vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 1.8vmax;
color: #444444;
margin: 0 1vmax;
box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.2) inset;
background: #f2feff;
}
#no1::-webkit-outer-spin-button,
#no1::-webkit-inner-spin-button,
#no2::-webkit-outer-spin-button,
#no2::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} input[type=number] {
-moz-appearance: textfield;
}
#no1::-webkit-input-placeholder, #no2::-webkit-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#no1::-ms-input-placeholder, #no2::-ms-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#no1::placeholder, #no2::placeholder {
color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#no1:focus, #no2:focus{
outline: none;
}
#gameplay{
display: none;
width: 100vw;
height: 100vh;
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01.png);
background-position: center;
background-repeat: no-repeat; 
background-size: cover;
align-items: center;
justify-content: center;
flex-direction: row;
align-content: center;
position: fixed;
top: 0;
left: 0; }
#sTable{ width: 100%;
border: solid 2px #555555;
background-color: white;
border-spacing: 0;
}
#sTable td { position: relative;
}
#sTable td:after {
content: "";
display: block;
margin-top: 100%;
}
.boxes {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
font-family: "Poppins";
font-size: 2vmax;
text-align: center;
justify-content: center;
border: solid 1px #999999;
background-color: rgba(223,253,255,0.4);
vertical-align: middle;
caret-color: transparent;
}
.boxes:focus{
outline: 1px solid;
}
#n2, #n14, #n6, #n10 {
border-right: solid 2.5px #555555;
}
#n3, #n15, #n7, #n11 {
border-left: solid 2.5px #555555;
}
#n6, #n5, #n7, #n8{
border-bottom: solid 2.5px #555555;
}
#n9, #n10, #n11, #n12 {
border-top: solid 2.5px #555555;
}
#start{
border-radius : 50px;
width : 25vmax;
height: 5vmax;
line-height: 2.5vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 2.5%;
border: none;
font-size: 2vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
#submit, #newGame, #reset{
border-radius : 50px;
width : 14vmax;
height: 4vmax;
line-height: 2vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 1.5vmax;
border: none;
font-size: 1.5vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
#gamestart{ position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
vertical-align: middle;
align-items: center;
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-position: center; background-repeat: no-repeat; background-size: cover;
justify-content: center;
flex-direction: column;
}
#timing{
display: flex;
flex-direction: row;
width: 100%;
}
#selNos{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 1vmax 0 0 0;
}
.nos{
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
cursor: pointer;
}
#timer{
width: 50%;
font-family: "Poppins";
text-align: right;
font-weight: 400;
font-size: 1.5vmax;
color: #252525;
text-align: right;
padding: 0;
margin: 0;
}
#stopwatch{
display: flex;
flex-direction: column;
}
#todayTime{
width: 50%;
text-align: left;
padding: 0;
font-family: "Poppins";
font-weight: 400;
font-size: 1.5vmax;
color: #252525;
text-align: left;
}
#pname {
border-radius : 50px;
width : 25vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 2vmax;
color: #444444;
box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.2) inset;
background: #f2feff;
}
#pname::-webkit-input-placeholder { color: #8a8a8a;
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::-ms-input-placeholder { color: #8a8a8a;
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::placeholder {
color: #8a8a8a;
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
}
#name {
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 2vmax;
color: #444444;
}
#start:focus, #submit:focus, #newGame:focus, #reset:focus {
outline: none;
background-color: #af0001;
color: white;
}
#pname:focus {
outline: none;
background-color: #e0fdff;
color: #444444;
}
#start:hover, #submit:hover, #newGame:hover, #reset:hover {
background-color: #4aceda;
}
#rules{
text-align: center;
font-size: 1.2vmax;
font-weight: 400;
padding: 1.5vmax 20% 3vmax 20%;
color: #444444;
}
#title {
font-size: 1.8vmax;
font-weight: 700;
}
#resultsTab {
width: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.5vmax;
border: none;
}
#resultsTab td {
vertical-align: top;
padding: 0.75%;
border: none;
}
#leftItems {
text-align: right;
width: 48%;
}
#sep {
width: 5%;
padding: 5%;
text-align: center;
}
#rightItems {
text-align: left;
}
#resultsDiv {
width: 70%;
text-align: center;
font-size: 1.2vmax;
font-weight: 600;
}
.replay {
display: block;
border-radius : 50px;
width : 15vmax;
height: 3vmax;
line-height: 1.5vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 2%;
border: none;
font-size: 1.2vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
.replay:focus {
outline: none;
background-color: #4aceda;
}
.replay:hover{
background-color: #4aceda;
}
#results {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
vertical-align: middle;
align-items: center;
justify-content: center;
flex-direction: column;
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-position: center; background-repeat: no-repeat; background-size: cover;
}
#buttons {
display: flex;
justify-content: center;
align-items: center;
height: 10vmax;
width: 50vmax;
}
#board{
width: 30vw;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
margin: 0 5vw;
}
#branding{
width: 28vw;
height: 100vh;
float: left;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#branding img{
max-width: 100%;
}
#warning{
font-size: 1.2vmax;
font-weight: 400;
font-family: "Poppins";
text-align: center;
}
#optButtons{
width: 28vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#btnGrp{
display: flex;
flex-direction: column;
}
#ResTitle{
font-size: 2vmax;
padding: 0.25% 0;
font-weight: 600;
}
.boxes6{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
font-family: "Poppins";
font-size: 2vmax;
text-align: center;
justify-content: center;
border: solid 1px #999999;
background-color: rgba(223,253,255,0.4);
vertical-align: middle;
caret-color: transparent;
}
.boxes6:focus{
outline: 1px solid;
}
#n026, #n086, #n0146, #n0206, #n0266, #n0326{
border-right: solid 2px #555555;
}
#n036, #n096, #n0156, #n0216, #n0276, #n0336{
border-left: solid 2px #555555;
}
#n066, #n076, #n086, #n096, #n0106, #n0116, #n0186, #n0196, #n0206, #n0216, #n0226, #n0236{
border-bottom: solid 2px #555555;
}
#n0126, #n0136, #n0146, #n0156, #n0166, #n0176, #n0246, #n0256, #n0266, #n0276, #n0286, #n0296{
border-top: solid 2px #555555;
}
.boxes9{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
font-family: "Poppins";
font-size: 1.75vmax;
text-align: center;
justify-content: center;
border: solid 1px #999999;
background-color: rgba(223,253,255,0.4);
vertical-align: middle;
caret-color: transparent;
}
.boxes9:focus{
outline: 1px solid;
}
#n029, #n0119, #n0209, #n0299, #n0389, #n0479, #n0569, #n0659, #n0749, 
#n059, #n0149, #n0239, #n0329, #n0419, #n0509, #n0599, #n0689, #n0779{
border-right: solid 2px #555555;
}
#n039, #n0129, #n0219, #n0309, #n0399, #n0489, #n0579, #n0669, #n0759,
#n069, #n0159, #n0249, #n0339, #n0429, #n0519, #n0609, #n0699, #n0789{
border-left: solid 2px #555555;
}
#n0189, #n0199, #n0209, #n0219, #n0229, #n0239, #n0249, #n0259, #n0269,
#n0459, #n0469, #n0479, #n0489, #n0499, #n0509, #n0519, #n0529, #n0539{
border-bottom: solid 2px #555555;
}
#n0279, #n0289, #n0299, #n0309, #n0319, #n0329, #n0339, #n0349, #n0359,
#n0549, #n0559, #n0569, #n0579, #n0589, #n0599, #n0609, #n0619, #n0629{
border-top: solid 2px #555555;
}
@media screen and (max-width: 1024px) and (min-width: 601px){
.header-wrapper{
padding: 2% 3.5% 1% 1%;
} 
.logo{
max-width: 32vmin;
}
.menu-icon{
transform: scale(1.0);
}
.social-icons li {
margin: 0.85vmax;
}
#homeDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}	
#aboutDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whoDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-who-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-why-bg-02-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#storyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#coursesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#regDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#specialDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#contactDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#formDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesListDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#eventDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#galleryDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#photosDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#abt-left-hand, #abt-right-hand, #abt-center-hand, #courses-left-hand, #courses-right-hand, #courses-left-bottom-hand, #courses-right-bottom-hand, 
#gallery-left-hand, #gallery-right-hand, #contact-left-hand, #contact-right-hand, #games-right-hand, #games-left-hand{
display: none;
}
.imgDiv, .imgDivSingle{
display: none;
}
.imgDivMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: space-between;
}
.imgDivSingleMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: center;
}
#abt-left-hand-t, #abt-right-hand-t, #abt-center-hand-t, #courses-left-hand-t, #courses-right-hand-t, #courses-left-bottom-hand-t, #courses-right-bottom-hand-t, 
#gallery-left-hand-t, #gallery-right-hand-t, #contact-left-hand-t, #contact-right-hand-t, #games-right-hand-t, #games-left-hand-t{
position: absolute;
display: block;
}
#abt-left-hand-t img, #abt-right-hand-t img, #abt-center-hand-t img, #courses-left-hand-t img, #courses-right-hand-t img, #courses-left-bottom-hand-t img, #courses-right-bottom-hand-t img, 
#gallery-left-hand-t img, #gallery-right-hand-t img, #contact-left-hand-t img, #contact-right-hand-t img, #games-right-hand-t img, #games-left-hand-t img{
max-width: 100%;
}
#abt-left-hand-t{
max-width: 30%;
left: 5vw;
bottom: 3vh;
}
#abt-right-hand-t{
max-width: 30%;
right: 5vw;
bottom: 3vh;
}
#abt-center-hand-t{
max-width: 45%;
top: 3vh;
}
#courses-left-hand-t{
left: 7vw;
max-width: 22%;
bottom: 2vh;
}
#courses-right-hand-t{
right: 7vw;
max-width: 20%;
bottom: 3vh;
}
#courses-left-bottom-hand-t{
left: 13vw;
max-width: 22%;
top: 4.5vh;
}
#courses-right-bottom-hand-t{
right: 13vw;
max-width: 22%;
top: 5.5vh;
}
#gallery-left-hand-t{
max-width: 18%;
top: -2vh;
left: 10vw;
} 
#gallery-right-hand-t{
max-width: 26%;
bottom: 20vh;
right: 12vw;
}
#contact-left-hand-t{
max-width: 28%;
left: -2vw;
top: 5vh;
}
#contact-right-hand-t{
max-width: 28%;
right: -2vw;
top: 5vh;
}
#games-left-hand-t{
max-width: 20%;
left: 2vw;
top: -2vh;
}
#games-right-hand-t{
max-width: 20%;
right: 1vw;
top: -2vh;
}
.mqSubtextDiv{
font-size: 2vmin;
width: 80%;
text-align: center;
line-height: 1.5;
}
.lblGameName{
font-size: 1.7vmin;
}
.subPageleftDiv{
width: 80%;
}
.subPageRightDiv{
width: 20%;
display: flex;
align-items: center;
}
.navDots{
font-size: 3vmin;
line-height: 2.25vmax;
}
.navDots:hover .tooltiptext {
font-size: 1.5vmin;
padding: 0.5vmin 0.9vmin;
right: 2.5vmax;
white-space: nowrap;
}
.coursesDiv{
flex-direction: column;
}
.imgDivMain{
width: 80%;
}
.imageDiv{
flex-flow: nowrap;
justify-content: space-evenly;
padding: 1.5vmin 0;
}
.imageDiv img{
max-width: 17%;
margin: 0;
}
.contentDiv{
width: 75%;
}
.subPageContent{
width: 100%;
font-size: 1.5vmin;
line-height: 1.5;
}
}
@media screen and (max-width: 600px){
.header-wrapper{
padding: 3.5% 3.5% 1% 1%;
} 
.logo{
max-width: 42vmin;
}
.menu-icon {
height: 4vmin;
width: 4vmin;
transform: scale(0.8);
}
.menu-icon__line {
height: 2px;
width: 4vmin;
margin-bottom: 1vmin;
}
.menu-icon__line-left {
width: 2.2vmin;
}
.menu-icon__line-right {
width: 2.2vmin;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
width: 2.2vmin;
}
body.nav-active .menu-icon__line-left {
width: 1.8vmin;
-webkit-transform: translate(0.4vmin, 0.55vmin) rotate(45deg);
transform: translate(0.4vmin, 0.55vmin) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 1.8vmin;
float: right;
-webkit-transform: translate(-0.4vmin, -0.65vmin) rotate(45deg);
transform: translate(-0.4vmin, -0.65vmin) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 1.8vmin;
}
.footerDiv{
bottom: 0;
padding: 1.2vmax 0 1.2vmax 0;
justify-content: center;
}
#homeDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}	
#aboutDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whoDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-who-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-why-bg-02-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#storyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#coursesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#regDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#specialDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#contactDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#formDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesListDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#eventDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#galleryDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#photosDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.mqtextDiv{
font-size: 6.5vmin;
margin: -0.15% 15%;
}
.boxesGrpDiv, .horbox, .boxImgMob{
display: none;
}
.boxesGrpDivMob{
display: flex;
width: 100%;
justify-content: center;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
.horBoxMob {
width: 80%;
background-color: white;
border-radius: 0.8vmax;
display: flex;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 25px 80px rgba(0, 0, 0, 0.12);
padding: 2.5% 2.5%;
}
.mobBox{
width: 100%;
display: flex;
flex-direction: row;
}
.boxImgMob{
display: flex;
width: 20%;
margin-right: 1.5vmax;
}
.boxImgMob img{
max-width: 100%;
height: auto;
}
.boxTextDiv{
width: 80%;
}
.headlineText{
width: 80%;
margin-bottom: 0.5vmax;
}
.actnBtnsDiv{
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 1% 0 2% 0;
}
.actnBtn{
border-radius: 20vmin;
padding: 3vmin 6.5vmin;
margin: 2vmin 0.75vmax;
font-size: 3.5vmin;
line-height: 1.25;
}
.actnBtnsHomeDiv{
margin-bottom: 10vmin;
}
.actnBtnHome{
border-radius: 20vmin;
padding: 2vmin 6.5vmin;
margin: 2vmin 0.75vmax;
font-size: 3.5vmin;
line-height: 1.25;
}
.dotsMob{
display: flex;
text-align: center;
margin: 1vmax 0;
}
.dot {
height: 0.5vmax;
width: 0.5vmax;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.activeDot {
background-color: #7a7a7a;
}
.mqPageTitle{
font-size: 8.5vmin;
}
.mqSubtextDiv{
font-size: 3.5vmin;
width: 80%;
text-align: center;
line-height: 1.7;
}
.mqtextDivPages{
margin: 3% 3%;
}
.navDots{
font-size: 5vmin;
line-height: 2.25vmax;
}
.taglineDiv{
width: 80%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
}
.subPageDiv{
width: 75%;
height: 85%;
}
.subPageTitle{
font-size: 5vmin;
text-align: center;
}
.subPageContent{
font-size: 2vmin;
line-height: 1.5;
text-align: center;
margin: 2% 0;
}
.subPageleftDiv{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.subPageRightDiv{
display: none;
}
#whyUsBoxesTab{
display: none;
}
.whyUsDivMob{
display: flex;
height: 75%;
flex-direction: column;
overflow-y: scroll;
}
.whyUsDivMob::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.whyUsDivMob::-webkit-scrollbar{
width: 0.30em;
}
.whyUsDivMob::-webkit-scrollbar-thumb{
border-radius: 1vmax;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
} 
.whyTitle{
font-size: 3.05vmin;
font-family: "Poppins";
font-weight: 600;
color: #444;
text-transform: uppercase;
text-align: center;
}
.whySubtitle{
font-size: 3vmin;
font-family: "Poppins";
font-weight: 500;
color: #7a7a7a;
text-align: center;
}
.subPageActnBtnsDiv{
display: flex;
justify-content: center;
width: 100%;
margin: 1.5vmax 0;
}
.subPageBtn{
border-radius: 2vmax;
padding: 1vmax 2.5vmax;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 1vmax 0 0;
font-family: "Poppins";
font-size: 2vmin;
line-height: 1.25vmax;
cursor: pointer;
}
.cardImgMob{
width: 10vmin;
height: 10vmin;
padding: 2.5vmin;
margin-bottom: 0.5vmax;
display: flex;
justify-content: center;
border-radius: 20vmax;
background-color: #4aceda;
}
.cardImgMob img{
max-width: 100%;
filter: invert(1);
}
.whyUsBoxMob{
margin: 5% 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#abt-left-hand, #abt-right-hand, #abt-center-hand, #courses-left-hand, #courses-right-hand, #courses-left-bottom-hand, #courses-right-bottom-hand, 
#gallery-left-hand, #gallery-right-hand, #contact-left-hand, #contact-right-hand, #games-right-hand, #games-left-hand{
display: none;
}
.imgDiv, .imgDivSingle{
display: none;
}
.imgDivMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: space-between;
}
.imgDivSingleMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: center;
}
#abt-left-hand-t, #abt-right-hand-t, #abt-center-hand-t, #courses-left-hand-t, #courses-right-hand-t, #courses-left-bottom-hand-t, #courses-right-bottom-hand-t, 
#gallery-left-hand-t, #gallery-right-hand-t, #contact-left-hand-t, #contact-right-hand-t, #games-right-hand-t, #games-left-hand-t{
display: block;
position: absolute;
}
#abt-left-hand-t img, #abt-right-hand-t img, #abt-center-hand-t img, #courses-left-hand-t img, #courses-right-hand-t img, #courses-left-bottom-hand-t img, #courses-right-bottom-hand-t img, 
#gallery-left-hand-t img, #gallery-right-hand-t img, #contact-left-hand-t img, #contact-right-hand-t img, #games-right-hand-t img, #games-left-hand-t img{
max-width: 100%;
}
#abt-left-hand-t{
max-width: 30%;
left: 5vw;
bottom: 3vh;
}
#abt-right-hand-t{
max-width: 30%;
right: 5vw;
bottom: 3vh;
}
#abt-center-hand-t{
max-width: 45%;
top: 3vh;
}
#contact-left-hand-t{
max-width: 35%;
left: -2vw;
bottom: 5vh;
}
#contact-right-hand-t{
max-width: 35%;
right: -2vw;
bottom: 5vh;
}
#courses-left-hand-t{
left: 7vw;
max-width: 27%;
bottom: 2vh;
}
#courses-right-hand-t{
right: 7vw;
max-width: 25%;
bottom: 3vh;
}
#courses-left-bottom-hand-t{
left: 11vw;
max-width: 27%;
top: 4.5vh;
}
#courses-right-bottom-hand-t{
right: 11vw;
max-width: 27%;
top: 5.5vh;
}
#gallery-left-hand-t{
max-width: 22%;
top: -30vh;
left: 10vw;
} 
#gallery-right-hand-t{
max-width: 30%;
bottom: 60vh;
right: 12vw;
}
#games-left-hand-t{
max-width: 24%;
left: 2vw;
top: -30vh;
}
#games-right-hand-t{
max-width: 24%;
right: 1vw;
bottom: 60vh;
}
.subPageleftDiv{
margin-right: 0;
}
.subPageContentLeft{
font-size: 3vmin;
text-align: center;
}
.coursesDiv{
flex-direction: column;
}
.imgDivMain{
width: 80%;
}
.imageDiv{
flex-flow: nowrap;
justify-content: space-evenly;
padding: 1.5vmin 0;
}
.imageDiv img{
max-width: 17%;
margin: 0;
}
.contentDiv{
width: 75%;
}
.subPageBoxLeft{
}
.subPageContent{
width: 100%;
font-size: 3vmin;
line-height: 1.5;
text-align: center;
}
#gameLinks{
display: none;
}
#gameLinksMob{
display: table;
width: 70%;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: 0;
}
#gameLinksMob td{
width: auto;
text-align: center;
padding: 1%;
}
.allPhotosDiv{
display: flex;
width: 75%;
height: 75%;
overflow-y: scroll;
transition: 0.3s;
}
.photolinks{
font-size: 3vmin;
}
.creditDiv{
width: 100%;
display: flex;
justify-content: center;
transform: rotateZ(0);
font-size: 2vmin;
position: absolute;
bottom:5vh;
left: 0;
}
#start {
margin: 5%;
height: 6vmax;
font-size: 2.25vmax;
}
#rules{
padding-left: 12%;
padding-right: 12%;
}
#gameplay{
flex-direction: column;
justify-content: center;
}
.optDiv{
height: 30%;
}
.ansOpts{
width: 42%;
height: 6vmax;
margin: 0 2% ;
}
#gameresult{
flex-direction: column;
justify-content: center;
}
.common-btns{
flex-direction: row;
margin: 3% 0;
}
.replay{
margin: 0 3%;
}
#buttons{
flex-direction: row;
}
.gameDiv{
width: 80%;
height: 65%;
}
.resultDiv{
width: 80%;
height: 65%;
}
#pageTitle{
display: none;
}
#pageTitleM{
display: flex;
flex-direction: column;
}
#todayTime{
width: 50%;
}
#timer{
width: 50%;
}
#timerDiv{
height: auto;
}
#title{
font-size: 2.5vmax;
}
#gameplay{
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
flex-direction: column;
}
#board{
width: 80vw;
height: 60vh;
margin: 1.5vh 0;
}
#branding{
width: 100vw;
height: 15vh;
}
#optButtons{
width: 100vw;
height: 15vh;
align-items: center;
}
#btnGrp{
flex-direction: row;
}
}html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus:not(:focus-visible),[type=submit]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}.alignfull,.alignfull img{width:100vw}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{display:block;position:relative}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{margin:50px auto;max-width:500px}.post-password-form p{align-items:flex-end;display:flex;width:100%}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#eee;clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{max-height:500px;-o-object-fit:cover;object-fit:cover;width:100%}@media(max-width:991px){.post .wp-post-image{max-height:400px}}@media(max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{font-size:.9em;list-style:none;margin:0;padding:0}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{border-block-end:1px solid #ccc;display:flex;flex-direction:column;padding-block-end:30px;padding-block-start:30px;padding-inline-end:0;padding-inline-start:60px}#comments .comment .avatar,#comments .pingback .avatar{border-radius:50%;left:0;margin-inline-end:10px;position:absolute}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{list-style:none;margin:0;padding-inline-start:30px;position:relative}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{content:"↪";display:inline-block;font-size:1em;font-weight:400;left:0;line-height:100%;position:absolute;top:45px;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media(min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media(max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{float:left;position:inherit}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{margin-inline-end:auto;margin-inline-start:auto;width:100%}@media(max-width:575px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{padding-inline-end:10px;padding-inline-start:10px}}@media(min-width:576px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media(min-width:768px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:992px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:1200px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)}.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;padding-block-end:1rem;padding-block-start:1rem;position:relative}.site-header .site-title{font-size:2.5rem;font-weight:500;line-height:1.2}.site-header .site-branding{display:flex;flex-direction:column;gap:.5rem;justify-content:center}.site-header .header-inner{display:flex;flex-wrap:wrap;justify-content:space-between}.site-header .header-inner .custom-logo-link{display:block}.site-header .header-inner .site-branding .site-description,.site-header .header-inner .site-branding .site-title{margin:0}.site-header .header-inner .site-branding .site-logo img{display:block}.site-header .header-inner .site-branding.show-logo .site-title,.site-header .header-inner .site-branding.show-title .site-logo{display:none!important}.site-header.header-inverted .header-inner{flex-direction:row-reverse}.site-header.header-inverted .header-inner .site-branding{text-align:end}.site-header.header-stacked .header-inner{align-items:center;flex-direction:column;text-align:center}.site-footer{padding-block-end:1rem;padding-block-start:1rem;position:relative}.site-footer .site-title{font-size:1.5rem;font-weight:500;line-height:1.2}.site-footer .site-branding{display:flex;flex-direction:column;gap:.5rem;justify-content:center}.site-footer .footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between}.site-footer .footer-inner .custom-logo-link{display:block}.site-footer .footer-inner .site-branding .site-description,.site-footer .footer-inner .site-branding .site-title{margin:0}.site-footer .footer-inner .site-branding .site-logo img{display:block}.site-footer .footer-inner .site-branding.show-logo .site-title,.site-footer .footer-inner .site-branding.show-title .site-logo{display:none!important}.site-footer .footer-inner .copyright{align-items:center;display:flex;justify-content:flex-end}.site-footer .footer-inner .copyright p{margin:0}.site-footer.footer-inverted .footer-inner{flex-direction:row-reverse}.site-footer.footer-inverted .footer-inner .site-branding{text-align:end}.site-footer.footer-stacked .footer-inner{align-items:center;flex-direction:column;text-align:center}.site-footer.footer-stacked .footer-inner .site-branding .site-title{text-align:center}.site-footer.footer-stacked .footer-inner .site-navigation .menu{padding:0}@media(max-width:576px){.site-footer:not(.footer-stacked) .footer-inner .copyright,.site-footer:not(.footer-stacked) .footer-inner .site-branding,.site-footer:not(.footer-stacked) .footer-inner .site-navigation{display:block;max-width:none;text-align:center;width:100%}.site-footer .footer-inner .site-navigation ul.menu{justify-content:center}.site-footer .footer-inner .site-navigation ul.menu li{display:inline-block}}.site-header.header-stacked .site-navigation-toggle-holder{justify-content:center;max-width:100%}.site-header.menu-layout-dropdown .site-navigation{display:none}.site-navigation-toggle-holder{align-items:center;display:flex;padding:8px 15px}.site-navigation-toggle-holder .site-navigation-toggle{align-items:center;background-color:rgba(0,0,0,.05);border:0 solid;border-radius:3px;color:#494c4f;cursor:pointer;display:flex;justify-content:center;padding:.5rem}.site-navigation-toggle-holder .site-navigation-toggle-icon{display:block;width:1.25rem}.site-navigation-toggle-holder .site-navigation-toggle-icon:after,.site-navigation-toggle-holder .site-navigation-toggle-icon:before{background-color:currentColor;border-radius:3px;content:"";display:block;height:3px;transition:all .2s ease-in-out}.site-navigation-toggle-holder .site-navigation-toggle-icon:before{box-shadow:0 .35rem 0 currentColor;margin-block-end:.5rem}.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon:before{box-shadow:none;transform:translateY(.35rem) rotate(45deg)}.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon:after{transform:translateY(-.35rem) rotate(-45deg)}.site-navigation{align-items:center;display:flex}.site-navigation ul.menu,.site-navigation ul.menu ul{list-style-type:none;padding:0}.site-navigation ul.menu{display:flex;flex-wrap:wrap}.site-navigation ul.menu li{display:flex;position:relative}.site-navigation ul.menu li a{display:block;padding:8px 15px}.site-navigation ul.menu li.menu-item-has-children{padding-inline-end:15px}.site-navigation ul.menu li.menu-item-has-children:after{align-items:center;color:#666;content:"▾";display:flex;font-size:1.5em;justify-content:center;text-decoration:none}.site-navigation ul.menu li.menu-item-has-children:focus-within>ul{display:block}.site-navigation ul.menu li ul{background:#fff;display:none;left:0;min-width:150px;position:absolute;top:100%;z-index:2}.site-navigation ul.menu li ul li{border-block-end:1px solid #eee}.site-navigation ul.menu li ul li:last-child{border-block-end:none}.site-navigation ul.menu li ul li.menu-item-has-children a{flex-grow:1}.site-navigation ul.menu li ul li.menu-item-has-children:after{transform:translateY(-50%) rotate(-90deg)}.site-navigation ul.menu li ul ul{left:100%;top:0}.site-navigation ul.menu li:hover>ul{display:block}footer .site-navigation ul.menu li ul{bottom:100%;top:auto}footer .site-navigation ul.menu li ul ul{bottom:0}footer .site-navigation ul.menu a{padding:5px 15px}.site-navigation-dropdown{bottom:0;left:0;margin-block-start:10px;position:absolute;transform-origin:top;transition:max-height .3s,transform .3s;width:100%;z-index:10000}.site-navigation-toggle-holder:not(.elementor-active)+.site-navigation-dropdown{max-height:0;transform:scaleY(0)}.site-navigation-toggle-holder.elementor-active+.site-navigation-dropdown{max-height:100vh;transform:scaleY(1)}.site-navigation-dropdown ul{padding:0}.site-navigation-dropdown ul.menu{background:#fff;margin:0;padding:0;position:absolute;width:100%}.site-navigation-dropdown ul.menu li{display:block;position:relative;width:100%}.site-navigation-dropdown ul.menu li a{background:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.102);color:#55595c;display:block;padding:20px}.site-navigation-dropdown ul.menu li.current-menu-item a{background:#55595c;color:#fff}.site-navigation-dropdown ul.menu>li li{max-height:0;transform:scaleY(0);transform-origin:top;transition:max-height .3s,transform .3s}.site-navigation-dropdown ul.menu li.elementor-active>ul>li{max-height:100vh;transform:scaleY(1)}@media(max-width:576px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation{display:none!important}}@media(min-width:768px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}}@media(min-width:576px)and (max-width:767px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation{display:none!important}}@media(min-width:992px){.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}}@media(max-width:992px){.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation{display:none!important}}.site-header.menu-dropdown-none:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}*{
margin: 0px;
padding: 0px;
}
html, body{
height: 100vh !important;
width: 100vw !important;
overflow: hidden;
scroll-behavior: smooth;
margin: 0px;
padding: 0px;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
background-color: #4aceda;
}
.cd-header{
position: fixed;
display: flex;
width:100%;
top:0;
left:0;
z-index:999;
} 
.header-wrapper{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 1% 1.5% 1% 1%;
} 
.logo-wrap {
display:flex; left:0;
cursor: pointer;
}
.nav-but-wrap{ 
display: flex; justify-content: right;
align-items: center;
transition : all 0.3s ease-out;
}
.logo-wrap a {
cursor: pointer;
font-family: 'Poppins';
font-weight: 900;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
transition : all 0.3s ease-out;
}
.logo-wrap a span{ 
color: #8167a9;
}
.logo-wrap a:hover {
opacity: 0.9;
}
.logo{
max-width: 25vmin;
height: auto;
}
.menu-icon {
height: 4vmin;
width: 4vmin;
z-index: 2;
cursor: pointer;
display: block;
transform: scale(0.8);
}
.menu-icon__line {
height: 2px;
width: 4vmin;
display: block;
background-color: #444;
margin-bottom: 1vmin;
cursor: pointer;
-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
transition: background-color .5s ease, -webkit-transform .2s ease;
transition: transform .2s ease, background-color .5s ease;
transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
width: 2.2vmin;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu-icon__line-right {
width: 2.2vmin;
float: right;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
width: 2.2vmin;
}
.nav {
position: fixed;
z-index: 998;
}
.nav:before, .nav:after {
content: "";
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(250, 209, 65, 0.6);
border-bottom-left-radius: 200%;
z-index: 998;
-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
-webkit-transform: translateX(100%) translateY(-100%);
transform: translateX(100%) translateY(-100%);
}
.nav:after {
background: rgba(74, 206, 218, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.nav:before {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.nav__content {
position: fixed;
visibility: hidden;
top: 50%; -webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
width: 100%;
text-align: center;
z-index: 999;
}
.nav__list {
position: relative;
padding: 0;
margin: 0; }
.nav__list-item {
position: relative;
display: block;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
text-align: center;
color: #fff;
overflow: hidden; 
font-family: 'Poppins';
font-size: 5.65vmin;
font-weight: 900;
line-height: 1.2;
letter-spacing: 3px;
-webkit-transform: translate(100px, 0%);
transform: translate(100px, 0%);
-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, transform .3s ease;
transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
margin-top: 0;
margin-bottom: 0;
}
.nav__list-item a{ 
position: relative;
text-decoration: none;
color: rgba(0,0,0,0.2);
overflow: hidden; 
cursor: pointer; z-index: 999;
display: inline-block;
text-transform: uppercase;
-webkit-transition: all 200ms linear;
transition: all 200ms linear; 
}
.nav__list-item a:after{ 
position: absolute;
content: '';
top: 50%;
margin-top: -2px;
left: 50%;
width: 0;
height: 0;
opacity: 0;
background-color: #c22e2e;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear; 
}
.nav__list-item a:hover:after{ 
height: 4px;
opacity: 1;
left: 0;
width: 100%;
}
.nav__list-item a:hover{
color: rgba(0,0,0,1);
}
.nav__list-item.active-nav a{
color: rgba(255,255,255,1);
}
.nav__list-item.active-nav a:after{ 
height: 4px;
opacity: 1;
left: 0;
width: 100%;
}
body.nav-active .nav__content {
visibility: visible;
}
body.nav-active .menu-icon__line {
background-color: #fff;
-webkit-transform: translate(0px, 0px) rotate(-45deg);
transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
width: 1.8vmin;
-webkit-transform: translate(0.3vmin, 0.5vmin) rotate(45deg);
transform: translate(0.3vmin, 0.5vmin) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 1.8vmin;
float: right;
-webkit-transform: translate(-0.3vmin, -0.45vmin) rotate(45deg);
transform: translate(-0.3vmin, -0.45vmin) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 1.8vmin;
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
border-radius: 0;
}
body.nav-active .nav:after {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
body.nav-active .nav:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(1) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(2) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(3) {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(4) {
-webkit-transition-delay: 1.1s;
transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(5) {
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(6) {
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(7) {
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
-webkit-transition-delay: 1.6s;
transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
-webkit-transition-delay: 1.7s;
transition-delay: 1.7s;
}
.footerDiv{
width: 100%;
bottom: 0;
position: fixed;
display: flex;
flex-direction: row;
padding: 0.5vmax 0 0.5vmax 1.25vmax;
}
.footerItems{
display: flex;
flex-direction: row;
}
.social-icons {
list-style: none;
}
.social-icon {
color: #444;
}
.social-icons li {
display: inline;
margin: 0.2vmax;
}
.social-icons a {
color: #444;
text-decoration: none;
}
.fa-facebook-f, .fa-instagram, .fa-whatsapp {
padding: 0.65vmax;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-facebook-f:hover, .fa-instagram:hover, .fa-whatsapp:hover {
background-color: #af0001;
color: white;
border-radius: 100px;
}
.mainSec{
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.coursesDiv{
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
}
#homeDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#aboutDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whoDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-who-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#storyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/contact-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#coursesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#regDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bb-hc-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#specialDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-ls-rs-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#contactDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/contact-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#formDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesListDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bb-hc-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#eventDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#galleryDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#photosDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/courses-ls-rs-bg-01.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.taglineDiv{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.mqtextDiv{
width: 100%;
display: flex;
justify-content: center;
align-content: center;
margin: -0.5% 0;
font-family: "Poppins";
font-size: 5vmax;
font-weight: bolder;
color: #252525;
}
.mqtextDivPages{
width: 100%;
display: flex;
justify-content: center;
align-content: center;
margin: 0.15% 0;
font-family: "Poppins";
font-size: 5vmax;
font-weight: bolder;
color: #252525;
}
.mqPageTitle{
font-family: "Poppins";
font-size: 5vmax;
font-weight: 800;
color: #252525;
text-shadow: 0 10px 19px rgba(0, 0, 0, 0.2);
}
.actnBtnsDiv, .actnBtnsHomeDiv{
width: 100%;
display: flex;
justify-content: center;
align-content: center;
margin: 1% 0 2% 0;
}
.actnBtn, .actnBtnHome{
border-radius: 2vmax;
padding: 1.5vmin 3.5vmin;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 0.75vmax;
font-family: "Poppins";
font-size: 1vmax;
line-height: 1.25vmax;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
cursor: pointer;
z-index: 99;
}
.actnBtn a, .actnBtnHome a{
text-decoration: none;
color: white;
padding: 0.5vmax 0;
}
.blink {
color: #bdbdbd;
font-weight: 300;
animation: blink 0.75s infinite;
}
.flash{
color: #4aceda;
}
.headlineText{
width: 60%;
font-family: "Poppins";
font-size: 0.9vmax;
color: #252525;
font-weight: 600;
}
.boxesGrpDiv{
display: flex;
flex-direction: row;
width: 60%;
margin: 1%;
justify-content: space-between;
}
.horBox {
width: calc(100%/3);
margin: 0 1vmin;
background-color: white;
border-radius: 0.8vmax;
display: flex;
flex-direction: row;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 25px 80px rgba(0, 0, 0, 0.12);
padding: 1.5% 2.2%;
cursor: pointer;
}
.boxesGrpDivMob, .horBoxMob, .boxImgMob, .dotsMob, .whyUsDivMob{
display: none;
}
.boxImg{
width: 50%;
margin-right: 1vmax;
}
.boxImg img{
max-width: 100%;
height: auto;
}
.boxTextDiv{
display: flex;
flex-direction: column;
}
.boxHeadline{
font-family: "Poppins";
font-size: 0.85vmax;
font-weight: 500;
color: #444444;
}
.boxText{
font-family: "Poppins";
font-size: 0.75vmax;
font-weight: 400;
color: #7a7a7a;
}
@keyframes blink{
to { opacity: .0; }
}
.creditDiv{
font-family: "Poppins";
font-size: 0.6vmax;
position: absolute;
left: -3vw;
transform: rotateZ(-90deg);
}
.creditDiv a{
text-decoration: none;
color: #af0001;
}
.mqSubtextDiv{
width: 60%;
text-align: center;
font-family: "Poppins";
font-size: 2vmin;
color: #7a7a7a;
line-height: 1.5;
}
.imgDiv{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: space-between;
}
.imgDivSingle{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: center;
}
#abt-left-hand, #abt-right-hand, #abt-center-hand, #courses-left-hand, #courses-right-hand, #courses-left-bottom-hand, #courses-right-bottom-hand, 
#gallery-left-hand, #gallery-right-hand, #contact-left-hand, #contact-right-hand, #games-right-hand, #games-left-hand{
position: absolute;
transform-origin: center center;
image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast;   image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }
.imgDivMob, .imgDivSingleMob{
display: none;
}
#abt-left-hand-t, #abt-right-hand-t, #abt-center-hand-t, #courses-left-hand-t, #courses-right-hand-t, #courses-left-bottom-hand-t, #courses-right-bottom-hand-t, 
#gallery-left-hand-t, #gallery-right-hand-t, #contact-left-hand-t, #contact-right-hand-t, #games-right-hand-t, #games-left-hand-t{
display: none;
}
#abt-left-hand img, #abt-right-hand img, #abt-center-hand img, #courses-left-hand img, #courses-right-hand img, #courses-left-bottom-hand img, #courses-right-bottom-hand img, 
#gallery-left-hand img, #gallery-right-hand img, #contact-left-hand img, #contact-right-hand img, #games-right-hand img, #games-left-hand img{
max-width: 100%;
}
#abt-left-hand{
max-width: 25%;
left: -2vw;
top: -25vh;
}
#abt-right-hand{
max-width: 25%;
right: -1vw;
top: -25vh;
}
#abt-center-hand{
max-width: 33%;
top: 1.5vh;
}
#courses-left-hand{
max-width: 17%;
left: 0;
}
#courses-right-hand{
max-width: 15%;
right: 0;
}
#courses-left-bottom-hand{
max-width: 16%;
left: 22vw;
top: -2vh;
}
#courses-right-bottom-hand{
max-width: 16%;
right: 22vw;
top: -2vh;
}
#gallery-left-hand{
max-width: 18%;
top: -12vh;
left: 15vw;
} 
#gallery-right-hand{
max-width: 26%;
bottom: 25vh;
right: 12vw;
}
#contact-left-hand{
max-width: 22%;
bottom: -20vh;
left: -2vw;
}
#contact-right-hand{
max-width: 22%;
bottom: -20vh;
right: -2vw;
}
#games-left-hand{
max-width: 20%;
left: 2vw;
top: -15vh;
}
#games-right-hand{
max-width: 20%;
right: 1vw;
top: -15vh;
}
.upcomingText{
font-family: "poppins";
font-size: 1.5vmin;
font-weight: 500;
color: #4aceda;
letter-spacing: 3px;
text-transform: uppercase;
}
.eventTitle{
font-family: "Poppins";
font-size: 5vmin;
font-weight: 700;
color: #444444;
text-align: center;
}
.eventSubtextDiv{
font-family: "Poppins";
font-size: 1.5vmin;
font-weight: 500;
color: #7a7a7a;
}
.eventTimer{
display: flex;
width: 100%;
flex-direction: row;
margin: 4vmin 0;
justify-content: center;
font-size: 2vmin;
font-family: "Poppins";
color: #444;
font-weight: 500;
}
.timeBox{
display: flex;
flex-direction: column;
width: 15vmin;
height: 13vmin;
background-color: white;
border-radius: 0.75vmax;
border: #4aceda 3px solid;
margin: 0 1vmin;
justify-content: center;
align-items: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.timerNo{
font-family: "Poppins";
font-size: 5vmin;
font-weight: 700;
color: #444;
line-height: 1.2;
}
.timerText{
font-family: "Poppins";
font-size: 2vmin;
font-weight: 500;
color: #4aceda;
}
.navDiv{
width: 6.5vmin;
position: fixed;
right: 0;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navDots{
font-family: "Poppins";
font-size: 3vmin;
font-weight: 800;
color: #444;
cursor: pointer;
line-height: 1.25vmax;
text-align: center;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
}
.navDotsa{
text-decoration: none;
color: #444;
}
.navDots .tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
}
.navDots:hover .tooltiptext {
visibility: visible;
background-color: #4aceda;
color: #fff;
font-family: "Poppins";
font-size: 1.5vmin;
font-weight: 400;
text-align: center;
padding: 0.5vmin 0.9vmin;
right: 2.5vmax;
white-space: nowrap;
}
.subPageDiv{
display: flex;
flex-direction: row;
width: 70%;
height: 100%;
justify-content: center;
}
.subPageleftDiv{
width: 72%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 1.5vmin;
}
.subPageRightDiv{
width: 28%;
display: flex;
align-items: center;
}
.subPageRightDiv img{
max-width: 100%;
}
.subPageTitle{
font-family: "Poppins";
font-size: 3.5vmin;
font-weight: 700;
color: #444;
line-height: 2;
text-align: left;
}
.subPageContent{
width: 80%;
text-align: center;
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 400;
color: #7a7a7a;
line-height: 1.65;
}
.subPageContentLeft{
width: 100%;
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 400;
color: #7a7a7a;
line-height: 1.65;
}
.subPageContentLeft p{
padding: 1vmin 0;
}
.subPageBoxLeft{
width: 88%;
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 400;
color: #7a7a7a;
line-height: 1.65;
padding: 1vmin 0;
}
.subPageActnBtnsDiv{
display: flex;
width: 100%;
margin: 1.5vmax 0;
}
.subPageBtn{
border-radius: 2vmax;
padding: 1vmin 3vmin;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 1vmax 0 0;
font-family: "Poppins";
font-size: 1.5vmin;
line-height: 1.25vmax;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
cursor: pointer;
line-height: 1.5;
}
.subPageBtn a{
text-decoration: none;
color: white;
}
.subPageBtn:focus, .actnBtn:focus, .actnBtnHome:focus{
outline: none;
}
.actnBtn:hover, .subPageBtn:hover, .actnBtnHome:hover, .actnBtnContent:hover{
background-color: #4aceda;
color: white;
}
.actnBtn a:hover, .subPageBtn a:hover, .actnBtnHome a:hover, .actnBtnContent a:hover{
color: white;
}
#whyUsBoxesTab{
width: 60%;
table-layout: auto;
border-collapse: separate;
border-spacing: 1.5vmin;
}
#whyUsBoxesTab td{
width: calc(100%/3);
padding: 0;
border: none;
}
#whyUsBoxesTab tr:nth-child(odd), #whyUsBoxesTab tr:nth-child(even), #whyUsBoxesTab tbody tr:hover>td, #whyUsBoxesTab tbody>tr:nth-child(odd)>td, #whyUsBoxesTab tbody>tr:nth-child(odd)>th {background-color: white;}
.whyUsBox{
display: flex;
height: 18vmin;
flex-direction: column;
background-color: transparent;
perspective: 1000px;
justify-content: center;
align-items: center;
margin: 1vmin;
}
.whyUsBox .card{
position: absolute;
height: 100%;
width: 100%;
background: #4aceda;
border-radius: 1.2vmax;
transform: translateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
transition: transform 1s cubic-bezier(0.4,0.2,0.2,1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.front-face{
font-family: "Poppins";
font-size: 0.85vmax;
color: white;
font-weight: 500;
text-transform: uppercase;
padding: 20%;
}
.cardImg{
display: flex;
justify-content: center;
align-items: center;
}
.cardImg img{
max-width: 100%;
margin-bottom: 0.75vmax;
transform: scale(0.7);
filter: invert(1);
}
.whyUsBox:hover > .front-face{
transform-origin: left center;
transform: translateX(-30%) rotateY(180deg);
}
.whyUsBox .card img{
height: 100%;
width: 100%;
}
.whyUsBox .back-face{
transform-origin: right center;
background-color: #fad141;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
transform: scaleX(0) scaleY(0) translateZ(-50px) rotateY(90deg);
font-family: "Poppins";
font-size: 0.75vmax;
color: white;
font-weight: 400;
}
.whyUsBox .back-face p{
padding: 15%;
margin-bottom: 0;
}
.whyUsBox:hover > .back-face{
transform-origin: right center;
transform: scaleX(1) scaleY(1) translateZ(0) rotateY(0deg);
background-color: #fad141;
}
#gameLinks{
width: 70%;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
}
#gameLinks td{
width: auto;
text-align: center;
border: none;
padding: 0;
}
#gameLinksMob{
display: none;
}
#gameLinks tr:nth-child(odd), #gameLinks tr:nth-child(even), #gameLinks tbody tr:hover>td, #gameLinks tbody>tr:nth-child(odd)>td, #gameLinks tbody>tr:nth-child(odd)>th {background-color: white;}
#gameLinksMob tr:nth-child(odd), #gameLinksMob tr:nth-child(even), #gameLinksMob tbody tr:hover>td, #gameLinksMob tbody>tr:nth-child(odd)>td, #gameLinksMob tbody>tr:nth-child(odd)>th {background-color: white;}
.accordion {
cursor: pointer;
border: none;
outline: none;
height: 10vmax;
transition: 0.3s;
}
.accordion:hover {
transform: scale(1.05);
box-shadow: -2px 10px 15px 0 rgba(0, 0, 0, 0.08);
}
.lblGameName{
font-size: 2vmin;
font-family: "Poppins";
font-weight: 500;
color: #444;
padding: 0 8%;
word-break: break-all;
margin: 0;
}
#additn{
background-color: #ffef9f;
}
#subtrctn{
background-color: #caf7e3;
}
#divisionSec{
background-color: #dbfcff;
}
#multiplctn{
background-color: #ffef9f;
}
#sudokuSec{
background-color: #ffe9e7;
}
#mqOrig{
background-color: #a7f3fa;
}
#scrSec{
background-color: #fcb9b2;
}
#omoSec{
background-color: #fcf0f6;
}
#prcnt{
background-color: #b7f4d8;
}
#additnPanel{
background-color: #fff8d4;
}
#subtrctnPanel{
background-color: #e6fff4;
}
#divisionSecPanel{
background-color: #e9fdff;
}
#multiplctnPanel{
background-color: #fff8d4;
}
#sudokuSecPanel{
background-color: #fff6f5;
}
#scrSecPanel{
background-color: #ffedeb;
}
#omoSecPanel{
background-color: #fff7fb;
}
#prcntPanel{
background-color: #e8fff4;
}
#additn, #subtrctn, #divisionSec, #multiplctn, #omoSec, #prcnt, #scrSec, #sudokuSec{
border-radius: 1.5vmax;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin: 1vmax 0.75vmax;
box-shadow: 0px 10px 18px rgba(0,0,0,0.05);;
}
.panel {
overflow: hidden;
opacity: 0;
max-height: 0;
transition: 0.3s;
margin: -0.5vmax 3% 0 3%;
box-sizing: border-box;
width: 94%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 1.5vmax;
}
.panel.show {
opacity: 1;
max-height: 20vmax;
padding: 1.5vmax 0;
}
.lblGameOptVer{
list-style-type: none;
text-align: center;
font-size: 1vmax;
font-family: "Poppins";
font-weight: 400;
color: #252525;
padding: 0 1vmax;
line-height: 2;
}
.GameTitle{
font-size: 1.2vmax;
font-family: "Poppins";
font-weight: 500;
color: #252525;
}
.lblGameOptVer li{
text-decoration: none;
cursor: pointer;
}
.lblGameOptVer li a{
color: #444;
}
.accordionCourses {
cursor: pointer;
border: none;
outline: none;
width: 100%;
transition: 0.3s;
background-color: #F1FEFF;
border-radius: 100px;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
display: flex;
align-items: center;
margin: 2vmin 2.5vmin;
box-shadow: 0px 10px 18px rgba(0,0,0,0.05);
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 500;
color: #444;
line-height: 1.5;
}
.courseTitleDiv{
width: 100%;
display: flex;
flex-direction: row;
padding: 1.5vmin 2.5vmin;
justify-content: space-between;
align-items: center;
}
.courseTitleDiv p{
margin-bottom: 0;	
}
.subText{
font-size: 0.85vmax; 
color: #444; 
font-weight: 400;
}
.accordionCourses:hover .subText {
color: white;
}
.accordionCourses:hover .caretCourses {
border-top: 0.6vmin solid white;
}
.accordionCourses.active {
background-color: #af0001;
color: white;
}
.accordionCourses.active:hover .caretCourses {
border-top: none;
}
.accordionCourses.active .subText{
color: white;
}
.accordionCourses:hover {
transform: scale(1.02);
box-shadow: -2px 10px 15px 0 rgba(0, 0, 0, 0.08);
background-color: #4aceda;
color: white;
}
.panelCourses {
overflow: hidden;
opacity: 0;
max-height: 0;
transition: 0.3s;
margin: -1vmax 3% 0 3%;
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 1.5vmax;
}
.panelCourses.show {
opacity: 1;
max-height: 50vmin;
padding: 1.5vmax 0;
background-color: white;
box-shadow: 0px 10px 18px rgba(0,0,0,0.03);
}
.caretCourses{
width: 0;
height: 0;
border-left: 0.5vmin solid transparent;
border-right: 0.5vmin solid transparent;
border-top: 0.7vmin solid #7a7a7a;
}
.caretCourses.show{
border-top: none;
width: 0;
height: 0;
border-left: 0.5vmin solid transparent;
border-right: 0.5vmin solid transparent;
border-bottom: 0.7vmin solid white;
}
.contentDiv{
display: flex;
width: 40%;
flex-direction: column;
align-items: center;
padding: 0 0 1vmax 0;
}
.imgDivMain{
display: flex;
flex-direction: column;
width: 25%;
margin-right: 3vmin;
justify-content: center;
align-items: center;
}
.imgDivMain p{
font-family: "Poppins";
font-size: 1.5vmin;
font-weight: 500;
text-align: center;
word-spacing: 3px;
}
.imageDiv{
display: flex;
flex-flow: row wrap;
width: 100%;
height: auto;
}
.imageDiv img{
max-width: 44%;
margin: 3%;
}
.horBoxCourses{
display: flex;
width: 100%;
flex-direction: row;
}
.boxImgCourses{
width: 10%;
margin-right: 1vmax;
}
.boxImgCourses img{
max-width: 100%;
filter: hue-rotate(180deg) brightness(1.4);
}
#coursesContent{
table-layout: fixed;
width: 100%;
border: none;
}
#coursesContent td{
padding: 2% 5%;
background: white;
border: none;
}
#coursesContent tr:nth-child(odd), #coursesContent tr:nth-child(even), #coursesContent tbody tr:hover>td, #coursesContentb tbody>tr:nth-child(odd)>td, #coursesContent tbody>tr:nth-child(odd)>th {background-color: white;}
.boxTextDivCourses{
width: 90%;
display: flex;
flex-direction: column;
}
.boxHeadlineCourses{
font-family: "Poppins";
font-size: 1.75vmin;
font-weight: 500;
color: #444444;
}
.boxTextCourses{
font-family: "Poppins";
font-size: 1.65vmin;
font-weight: 400;
color: #7a7a7a;
}
.actnBtnsCoursesDiv{
width: 100%;
display: flex;
margin: 2% 0 2% 8%;
align-items: center;
}
.actnBtnContent{
border-radius: 2vmax;
padding: 0.5vmax 1.5vmax;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 0.75vmax;
font-family: "Poppins";
font-size: 0.8vmax;
line-height: 1.25vmax;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
cursor: pointer;
z-index: 1;
}
.actnBtnContent a{
text-decoration: none;
color: white;
padding: 0.5vmax 0;
}
.optDivGall{
display: flex;
flex-direction: row;
width: 60%;
justify-content: space-evenly;
margin-bottom: 2vmax;
}
.allPhotosDiv{
display: flex;
width: 60%;
height: 60%;
overflow-y: scroll;
transition: 0.3s;
}
.allPhotosDiv:hover .photoList {
filter: grayscale(1);
}
.imgDivGallery:hover .photoList{
filter: grayscale(0);
}
.photoList:hover{
transform: scale(1.05);
}
#allPhotosDiv{
display: flex;
}
#classPhotosDiv, #eventsPhotosDiv{
display: none;
}
.allPhotosDiv::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.allPhotosDiv::-webkit-scrollbar{
width: 0.45em; }
.allPhotosDiv::-webkit-scrollbar-thumb{
border-radius: 1vmax;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
} 
.photolinks{
font-family: "Poppins";
font-size: 2vmin;
text-decoration: none;
color: #444;
}
.photolinks:hover{
color: #4aceda;!important
}
.photolinks:active{
color: #af0001;!important
}
.gallery__column {
display: flex;
flex-direction: column;
width: 100%;
}
.gallery__thumb {
position: relative;
overflow: hidden;
}
.photoList{
display: block;
width: 100%;
transition: 0.3s;
cursor: pointer;
}
.imgDivGallery{
width: 98%;
margin: 1%;
}
.modal {
display: none;
position: fixed;
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.6);
}
.modal-content {
background-color: #DFFDFF70;
margin: auto;
width: 40%; border-radius: 1.2vmax;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: -2px 11px 18px 0 rgba(0, 0, 0, 0.15);
}
.modal-header{
font-family: "Poppins";
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.modal-body{
padding: 0.75vmax;
font-family: "Poppins";
height: 100%;
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modalTitle{
text-align: center;
font-weight: 500;
font-size: 1.75vmin;
margin: 0 0 0 3vmin;
}
.close {
font-family: "Poppins";
color: #7a7a7a;
float: right;
font-size: 3vmin;
border: none;
background-color: transparent;
padding: 0 1.2vmax;
}
.close:hover,
.close:focus {
color: #af0001;
text-decoration: none;
cursor: pointer;
outline: none;
background-color: transparent;
}
.modal-content-alert{
background-color: white;
margin: auto;
width: 85%;
height: auto;
border-radius: 1.2vmax;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: -2px 11px 18px 0 rgb(0 0 0 / 15%);
}
.dividerHorModal{
height: 2px;
width: 95%;
margin: 0 1vmax 0 1vmax;
background-color: rgba(0, 0, 0, 0.15);
}
.emptyDiv{
width: 100%;
height: 0.5vmax;
}
.formDiv{
width: 75%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
#gameplay{ display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: space-evenly;
flex-direction: row;
position: fixed;
}
#start{
border-radius : 50px;
width : 20vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 2.5%;
border: none;
font-size: 1.8vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
#gamestart{ position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
vertical-align: middle;
align-items: center; justify-content: center;
flex-direction: column;
}
#gameresult {
display: none;
flex-direction: row; background-color: transparent;
height: 100%;
width: 100%;
border-radius: 2vmax;
align-items: center;
justify-content: space-evenly;
font-size: 1.2vmax;
font-family: "Poppins";
font-weight: 400;
color: #252525;
text-align: center;
position: fixed;
}
.resultDiv{
width: 70%;
height: 80%;
background-color: #ffe9e7;
border-radius: 1.5vmax;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.resultsTab{
width: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.5vmax;
border: none;
}
.resultsTab td {
vertical-align: top;
padding: 0.5%;
border: none;
}
.resultsTab tr{
background-color: #ffe9e7; 
}
.leftItems {
text-align: right;
width: 48%;
}
.sep {
width: 5%;
padding: 5%;
text-align: center;
}
.resItems {
text-align: left;
}
#buttons {
display: flex;
flex-direction: row;
}
#start:focus {
outline: none;
background-color: #af0001;
color: white;
}
#start:hover {
background-color: #4aceda;
}
#rules {
text-align: center;
font-size: 1.2vmax;
font-weight: 400;
padding-top: 1.5vmax;
padding-bottom: 3vmax;
color: #444444;
padding-right: 20%;
padding-left: 20%;
}
#title {
font-size: 1.8vmax;
font-weight: 700;
}
.gameDiv{
width: 70%;
height: 80%;
text-align: center;
font-size: 1vmax;
font-weight: 600;
background-color: #fffcfe;
border-radius: 1.5vmax;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.timerDiv {
display: flex;
height: 10%;
width: 90%;
}
#timer {
width: 25%;
height: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.15vmax;
color: #656565;
text-align: right;
}
#todayTime {
width: 25%;
height: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.15vmax;
color: #656565;
text-align: left;
}
.qstnDiv{
display: flex;
width: 90%;
height: 18%;
text-align: center;
font-family: "Poppins";
font-weight: 700;
font-size: 3vmax;
color: #656565;
justify-content: center;
align-items: center;
}
.optDiv{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 40%;
width: 100%;
}
.ansOpts { 
display: flex;
border-radius: 3vmax;
width : 30vmax;
height: 6vmax;
justify-content: center;
font-family: "Poppins";
font-weight: 600;
margin: 0.25% 2% ;
border: none;
font-size: 2vmax;
color: #656565;
cursor: pointer;
background: #fad141;
box-shadow: -2px 11px 18px 0 rgba(0, 0, 0, 0.1); 
padding: 0 2vw;
}
.ansOpts:focus { 
outline: none;
}
#ansOpt1{
background-color: #e9fdff;
color: #656565;
}
#ansOpt2{
background-color: #ffef9f;
color: #656565;
}
#ansOpt3{
background-color: #ccfdd5;
color: #656565;
}
#ansOpt4{
background-color: #ffe9e7;
color: #656565;
}
#pname {
border-radius : 50px;
width : 20vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 1.8vmax;
color: #444444;
box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.2) inset;
background: #f2feff;
}
#pname::-webkit-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::-ms-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::placeholder {
color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname:focus{
outline: none;
}
.replay{
width: 15vmax;
height: 4vmax;
margin: 2vmax 0;
border-radius: 2vmax;
font-size: 1.2vmax;
font-family: "Poppins";
font-weight: 400;
color: white;
background-color: #68dadf;
border: none;
cursor: pointer;
box-shadow: -2px 11px 18px 0 rgba(0, 0, 0, 0.15); 
}
.replay:focus{
outline: none;
}
.replay:hover{
background-color: #af0001;
}
.mqlogoResult img{
max-width: 32%;
margin: 0 0 2% 0;
}
#pageTitle{
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#pageHeading, #pageHeadingM{
font-size: 1.15vmax;
font-family: "Poppins";
font-weight: 600;
color: #252525;
margin: 0;
}
#pageSubHeading, #pageSubHeadingM{
font-size: 1.15vmax;
font-family: "Poppins";
font-weight: 400;
color: #555;
margin: 0;
}
.common-btns{
display: flex;
flex-direction: column;
}
#pageTitleM{
display: none;
}
#range{
font-family: "Poppins";
text-align: center;
font-size: 1.2vmax;
font-weight: 400;
padding-top: 1.5vmax;
padding-bottom: 3vmax;
color: #444444;
padding-right: 20%;
padding-left: 20%;
}
#range p{
font-weight: 600;
margin: 1vmax 0;
}
#no1, #no2 {
border-radius : 30px;
width : 8.5vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 1.8vmax;
color: #444444;
margin: 0 1vmax;
box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.2) inset;
background: #f2feff;
}
#no1::-webkit-outer-spin-button,
#no1::-webkit-inner-spin-button,
#no2::-webkit-outer-spin-button,
#no2::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} input[type=number] {
-moz-appearance: textfield;
}
#no1::-webkit-input-placeholder, #no2::-webkit-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#no1::-ms-input-placeholder, #no2::-ms-input-placeholder { color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#no1::placeholder, #no2::placeholder {
color: #8a8a8a;
font-size: 1.5vmax;
font-weight: 400;
font-family: "Poppins";
}
#no1:focus, #no2:focus{
outline: none;
}
#gameplay{
display: none;
width: 100vw;
height: 100vh;
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01.png);
background-position: center;
background-repeat: no-repeat; 
background-size: cover;
align-items: center;
justify-content: center;
flex-direction: row;
align-content: center;
position: fixed;
top: 0;
left: 0; }
#sTable{ width: 100%;
border: solid 2px #555555;
background-color: white;
border-spacing: 0;
}
#sTable td { position: relative;
}
#sTable td:after {
content: "";
display: block;
margin-top: 100%;
}
.boxes {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
font-family: "Poppins";
font-size: 2vmax;
text-align: center;
justify-content: center;
border: solid 1px #999999;
background-color: rgba(223,253,255,0.4);
vertical-align: middle;
caret-color: transparent;
}
.boxes:focus{
outline: 1px solid;
}
#n2, #n14, #n6, #n10 {
border-right: solid 2.5px #555555;
}
#n3, #n15, #n7, #n11 {
border-left: solid 2.5px #555555;
}
#n6, #n5, #n7, #n8{
border-bottom: solid 2.5px #555555;
}
#n9, #n10, #n11, #n12 {
border-top: solid 2.5px #555555;
}
#start{
border-radius : 50px;
width : 25vmax;
height: 5vmax;
line-height: 2.5vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 2.5%;
border: none;
font-size: 2vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
#submit, #newGame, #reset{
border-radius : 50px;
width : 14vmax;
height: 4vmax;
line-height: 2vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 1.5vmax;
border: none;
font-size: 1.5vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
#gamestart{ position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
vertical-align: middle;
align-items: center;
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-position: center; background-repeat: no-repeat; background-size: cover;
justify-content: center;
flex-direction: column;
}
#timing{
display: flex;
flex-direction: row;
width: 100%;
}
#selNos{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 1vmax 0 0 0;
}
.nos{
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
cursor: pointer;
}
#timer{
width: 50%;
font-family: "Poppins";
text-align: right;
font-weight: 400;
font-size: 1.5vmax;
color: #252525;
text-align: right;
padding: 0;
margin: 0;
}
#stopwatch{
display: flex;
flex-direction: column;
}
#todayTime{
width: 50%;
text-align: left;
padding: 0;
font-family: "Poppins";
font-weight: 400;
font-size: 1.5vmax;
color: #252525;
text-align: left;
}
#pname {
border-radius : 50px;
width : 25vmax;
height: 4vmax;
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 2vmax;
color: #444444;
box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.2) inset;
background: #f2feff;
}
#pname::-webkit-input-placeholder { color: #8a8a8a;
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::-ms-input-placeholder { color: #8a8a8a;
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
}
#pname::placeholder {
color: #8a8a8a;
font-size: 2vmax;
font-weight: 400;
font-family: "Poppins";
}
#name {
text-align : center;
font-family: "Poppins";
font-weight: 500;
border: none;
font-size: 2vmax;
color: #444444;
}
#start:focus, #submit:focus, #newGame:focus, #reset:focus {
outline: none;
background-color: #af0001;
color: white;
}
#pname:focus {
outline: none;
background-color: #e0fdff;
color: #444444;
}
#start:hover, #submit:hover, #newGame:hover, #reset:hover {
background-color: #4aceda;
}
#rules{
text-align: center;
font-size: 1.2vmax;
font-weight: 400;
padding: 1.5vmax 20% 3vmax 20%;
color: #444444;
}
#title {
font-size: 1.8vmax;
font-weight: 700;
}
#resultsTab {
width: 100%;
font-family: "Poppins";
font-weight: 400;
font-size: 1.5vmax;
border: none;
}
#resultsTab td {
vertical-align: top;
padding: 0.75%;
border: none;
}
#leftItems {
text-align: right;
width: 48%;
}
#sep {
width: 5%;
padding: 5%;
text-align: center;
}
#rightItems {
text-align: left;
}
#resultsDiv {
width: 70%;
text-align: center;
font-size: 1.2vmax;
font-weight: 600;
}
.replay {
display: block;
border-radius : 50px;
width : 15vmax;
height: 3vmax;
line-height: 1.5vmax;
text-align : center;
font-family: "Poppins";
font-weight: 400;
margin : 2%;
border: none;
font-size: 1.2vmax;
color: white;
background: #af0001;
cursor: pointer;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}
.replay:focus {
outline: none;
background-color: #4aceda;
}
.replay:hover{
background-color: #4aceda;
}
#results {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
vertical-align: middle;
align-items: center;
justify-content: center;
flex-direction: column;
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-01.png);
background-position: center; background-repeat: no-repeat; background-size: cover;
}
#buttons {
display: flex;
justify-content: center;
align-items: center;
height: 10vmax;
width: 50vmax;
}
#board{
width: 30vw;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
margin: 0 5vw;
}
#branding{
width: 28vw;
height: 100vh;
float: left;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#branding img{
max-width: 100%;
}
#warning{
font-size: 1.2vmax;
font-weight: 400;
font-family: "Poppins";
text-align: center;
}
#optButtons{
width: 28vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#btnGrp{
display: flex;
flex-direction: column;
}
#ResTitle{
font-size: 2vmax;
padding: 0.25% 0;
font-weight: 600;
}
.boxes6{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
font-family: "Poppins";
font-size: 2vmax;
text-align: center;
justify-content: center;
border: solid 1px #999999;
background-color: rgba(223,253,255,0.4);
vertical-align: middle;
caret-color: transparent;
}
.boxes6:focus{
outline: 1px solid;
}
#n026, #n086, #n0146, #n0206, #n0266, #n0326{
border-right: solid 2px #555555;
}
#n036, #n096, #n0156, #n0216, #n0276, #n0336{
border-left: solid 2px #555555;
}
#n066, #n076, #n086, #n096, #n0106, #n0116, #n0186, #n0196, #n0206, #n0216, #n0226, #n0236{
border-bottom: solid 2px #555555;
}
#n0126, #n0136, #n0146, #n0156, #n0166, #n0176, #n0246, #n0256, #n0266, #n0276, #n0286, #n0296{
border-top: solid 2px #555555;
}
.boxes9{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
font-family: "Poppins";
font-size: 1.75vmax;
text-align: center;
justify-content: center;
border: solid 1px #999999;
background-color: rgba(223,253,255,0.4);
vertical-align: middle;
caret-color: transparent;
}
.boxes9:focus{
outline: 1px solid;
}
#n029, #n0119, #n0209, #n0299, #n0389, #n0479, #n0569, #n0659, #n0749, 
#n059, #n0149, #n0239, #n0329, #n0419, #n0509, #n0599, #n0689, #n0779{
border-right: solid 2px #555555;
}
#n039, #n0129, #n0219, #n0309, #n0399, #n0489, #n0579, #n0669, #n0759,
#n069, #n0159, #n0249, #n0339, #n0429, #n0519, #n0609, #n0699, #n0789{
border-left: solid 2px #555555;
}
#n0189, #n0199, #n0209, #n0219, #n0229, #n0239, #n0249, #n0259, #n0269,
#n0459, #n0469, #n0479, #n0489, #n0499, #n0509, #n0519, #n0529, #n0539{
border-bottom: solid 2px #555555;
}
#n0279, #n0289, #n0299, #n0309, #n0319, #n0329, #n0339, #n0349, #n0359,
#n0549, #n0559, #n0569, #n0579, #n0589, #n0599, #n0609, #n0619, #n0629{
border-top: solid 2px #555555;
}
@media screen and (max-width: 1024px) and (min-width: 601px){
.header-wrapper{
padding: 2% 3.5% 1% 1%;
} 
.logo{
max-width: 32vmin;
}
.menu-icon{
transform: scale(1.0);
}
.social-icons li {
margin: 0.85vmax;
}
#homeDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}	
#aboutDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whoDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-who-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-why-bg-02-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#storyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#coursesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#regDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#specialDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#contactDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#formDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesListDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#eventDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#galleryDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#photosDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#abt-left-hand, #abt-right-hand, #abt-center-hand, #courses-left-hand, #courses-right-hand, #courses-left-bottom-hand, #courses-right-bottom-hand, 
#gallery-left-hand, #gallery-right-hand, #contact-left-hand, #contact-right-hand, #games-right-hand, #games-left-hand{
display: none;
}
.imgDiv, .imgDivSingle{
display: none;
}
.imgDivMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: space-between;
}
.imgDivSingleMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: center;
}
#abt-left-hand-t, #abt-right-hand-t, #abt-center-hand-t, #courses-left-hand-t, #courses-right-hand-t, #courses-left-bottom-hand-t, #courses-right-bottom-hand-t, 
#gallery-left-hand-t, #gallery-right-hand-t, #contact-left-hand-t, #contact-right-hand-t, #games-right-hand-t, #games-left-hand-t{
position: absolute;
display: block;
}
#abt-left-hand-t img, #abt-right-hand-t img, #abt-center-hand-t img, #courses-left-hand-t img, #courses-right-hand-t img, #courses-left-bottom-hand-t img, #courses-right-bottom-hand-t img, 
#gallery-left-hand-t img, #gallery-right-hand-t img, #contact-left-hand-t img, #contact-right-hand-t img, #games-right-hand-t img, #games-left-hand-t img{
max-width: 100%;
}
#abt-left-hand-t{
max-width: 30%;
left: 5vw;
bottom: 3vh;
}
#abt-right-hand-t{
max-width: 30%;
right: 5vw;
bottom: 3vh;
}
#abt-center-hand-t{
max-width: 45%;
top: 3vh;
}
#courses-left-hand-t{
left: 7vw;
max-width: 22%;
bottom: 2vh;
}
#courses-right-hand-t{
right: 7vw;
max-width: 20%;
bottom: 3vh;
}
#courses-left-bottom-hand-t{
left: 13vw;
max-width: 22%;
top: 4.5vh;
}
#courses-right-bottom-hand-t{
right: 13vw;
max-width: 22%;
top: 5.5vh;
}
#gallery-left-hand-t{
max-width: 18%;
top: -2vh;
left: 10vw;
} 
#gallery-right-hand-t{
max-width: 26%;
bottom: 20vh;
right: 12vw;
}
#contact-left-hand-t{
max-width: 28%;
left: -2vw;
top: 5vh;
}
#contact-right-hand-t{
max-width: 28%;
right: -2vw;
top: 5vh;
}
#games-left-hand-t{
max-width: 20%;
left: 2vw;
top: -2vh;
}
#games-right-hand-t{
max-width: 20%;
right: 1vw;
top: -2vh;
}
.mqSubtextDiv{
font-size: 2vmin;
width: 80%;
text-align: center;
line-height: 1.5;
}
.lblGameName{
font-size: 1.7vmin;
}
.subPageleftDiv{
width: 80%;
}
.subPageRightDiv{
width: 20%;
display: flex;
align-items: center;
}
.navDots{
font-size: 3vmin;
line-height: 2.25vmax;
}
.navDots:hover .tooltiptext {
font-size: 1.5vmin;
padding: 0.5vmin 0.9vmin;
right: 2.5vmax;
white-space: nowrap;
}
.coursesDiv{
flex-direction: column;
}
.imgDivMain{
width: 80%;
}
.imageDiv{
flex-flow: nowrap;
justify-content: space-evenly;
padding: 1.5vmin 0;
}
.imageDiv img{
max-width: 17%;
margin: 0;
}
.contentDiv{
width: 75%;
}
.subPageContent{
width: 100%;
font-size: 1.5vmin;
line-height: 1.5;
}
}
@media screen and (max-width: 600px){
.header-wrapper{
padding: 3.5% 3.5% 1% 1%;
} 
.logo{
max-width: 42vmin;
}
.menu-icon {
height: 4vmin;
width: 4vmin;
transform: scale(0.8);
}
.menu-icon__line {
height: 2px;
width: 4vmin;
margin-bottom: 1vmin;
}
.menu-icon__line-left {
width: 2.2vmin;
}
.menu-icon__line-right {
width: 2.2vmin;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
width: 2.2vmin;
}
body.nav-active .menu-icon__line-left {
width: 1.8vmin;
-webkit-transform: translate(0.4vmin, 0.55vmin) rotate(45deg);
transform: translate(0.4vmin, 0.55vmin) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 1.8vmin;
float: right;
-webkit-transform: translate(-0.4vmin, -0.65vmin) rotate(45deg);
transform: translate(-0.4vmin, -0.65vmin) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 1.8vmin;
}
.footerDiv{
bottom: 0;
padding: 1.2vmax 0 1.2vmax 0;
justify-content: center;
}
#homeDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}	
#aboutDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whoDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-who-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#whyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-why-bg-02-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#storyDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#coursesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#regDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#specialDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#contactDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/contact-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#formDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/home-bg-m-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#gamesListDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bb-hc-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#eventDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#galleryDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#photosDiv{
background: white url(https://mathsquestactivities.com/wp-content/uploads/2020/12/courses-ls-rs-bg-01-m.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.mqtextDiv{
font-size: 6.5vmin;
margin: -0.15% 15%;
}
.boxesGrpDiv, .horbox, .boxImgMob{
display: none;
}
.boxesGrpDivMob{
display: flex;
width: 100%;
justify-content: center;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
.horBoxMob {
width: 80%;
background-color: white;
border-radius: 0.8vmax;
display: flex;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 25px 80px rgba(0, 0, 0, 0.12);
padding: 2.5% 2.5%;
}
.mobBox{
width: 100%;
display: flex;
flex-direction: row;
}
.boxImgMob{
display: flex;
width: 20%;
margin-right: 1.5vmax;
}
.boxImgMob img{
max-width: 100%;
height: auto;
}
.boxTextDiv{
width: 80%;
}
.headlineText{
width: 80%;
margin-bottom: 0.5vmax;
}
.actnBtnsDiv{
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 1% 0 2% 0;
}
.actnBtn{
border-radius: 20vmin;
padding: 3vmin 6.5vmin;
margin: 2vmin 0.75vmax;
font-size: 3.5vmin;
line-height: 1.25;
}
.actnBtnsHomeDiv{
margin-bottom: 10vmin;
}
.actnBtnHome{
border-radius: 20vmin;
padding: 2vmin 6.5vmin;
margin: 2vmin 0.75vmax;
font-size: 3.5vmin;
line-height: 1.25;
}
.dotsMob{
display: flex;
text-align: center;
margin: 1vmax 0;
}
.dot {
height: 0.5vmax;
width: 0.5vmax;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.activeDot {
background-color: #7a7a7a;
}
.mqPageTitle{
font-size: 8.5vmin;
}
.mqSubtextDiv{
font-size: 3.5vmin;
width: 80%;
text-align: center;
line-height: 1.7;
}
.mqtextDivPages{
margin: 3% 3%;
}
.navDots{
font-size: 5vmin;
line-height: 2.25vmax;
}
.taglineDiv{
width: 80%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
}
.subPageDiv{
width: 75%;
height: 85%;
}
.subPageTitle{
font-size: 5vmin;
text-align: center;
}
.subPageContent{
font-size: 2vmin;
line-height: 1.5;
text-align: center;
margin: 2% 0;
}
.subPageleftDiv{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.subPageRightDiv{
display: none;
}
#whyUsBoxesTab{
display: none;
}
.whyUsDivMob{
display: flex;
height: 75%;
flex-direction: column;
overflow-y: scroll;
}
.whyUsDivMob::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.whyUsDivMob::-webkit-scrollbar{
width: 0.30em;
}
.whyUsDivMob::-webkit-scrollbar-thumb{
border-radius: 1vmax;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
} 
.whyTitle{
font-size: 3.05vmin;
font-family: "Poppins";
font-weight: 600;
color: #444;
text-transform: uppercase;
text-align: center;
}
.whySubtitle{
font-size: 3vmin;
font-family: "Poppins";
font-weight: 500;
color: #7a7a7a;
text-align: center;
}
.subPageActnBtnsDiv{
display: flex;
justify-content: center;
width: 100%;
margin: 1.5vmax 0;
}
.subPageBtn{
border-radius: 2vmax;
padding: 1vmax 2.5vmax;
background-color: #af0001;
color: white;
outline: none;
border: none;
margin: 0 1vmax 0 0;
font-family: "Poppins";
font-size: 2vmin;
line-height: 1.25vmax;
cursor: pointer;
}
.cardImgMob{
width: 10vmin;
height: 10vmin;
padding: 2.5vmin;
margin-bottom: 0.5vmax;
display: flex;
justify-content: center;
border-radius: 20vmax;
background-color: #4aceda;
}
.cardImgMob img{
max-width: 100%;
filter: invert(1);
}
.whyUsBoxMob{
margin: 5% 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#abt-left-hand, #abt-right-hand, #abt-center-hand, #courses-left-hand, #courses-right-hand, #courses-left-bottom-hand, #courses-right-bottom-hand, 
#gallery-left-hand, #gallery-right-hand, #contact-left-hand, #contact-right-hand, #games-right-hand, #games-left-hand{
display: none;
}
.imgDiv, .imgDivSingle{
display: none;
}
.imgDivMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: space-between;
}
.imgDivSingleMob{
display: flex;
flex-direction: row;
width: 100%;
position: relative;
justify-content: center;
}
#abt-left-hand-t, #abt-right-hand-t, #abt-center-hand-t, #courses-left-hand-t, #courses-right-hand-t, #courses-left-bottom-hand-t, #courses-right-bottom-hand-t, 
#gallery-left-hand-t, #gallery-right-hand-t, #contact-left-hand-t, #contact-right-hand-t, #games-right-hand-t, #games-left-hand-t{
display: block;
position: absolute;
}
#abt-left-hand-t img, #abt-right-hand-t img, #abt-center-hand-t img, #courses-left-hand-t img, #courses-right-hand-t img, #courses-left-bottom-hand-t img, #courses-right-bottom-hand-t img, 
#gallery-left-hand-t img, #gallery-right-hand-t img, #contact-left-hand-t img, #contact-right-hand-t img, #games-right-hand-t img, #games-left-hand-t img{
max-width: 100%;
}
#abt-left-hand-t{
max-width: 30%;
left: 5vw;
bottom: 3vh;
}
#abt-right-hand-t{
max-width: 30%;
right: 5vw;
bottom: 3vh;
}
#abt-center-hand-t{
max-width: 45%;
top: 3vh;
}
#contact-left-hand-t{
max-width: 35%;
left: -2vw;
bottom: 5vh;
}
#contact-right-hand-t{
max-width: 35%;
right: -2vw;
bottom: 5vh;
}
#courses-left-hand-t{
left: 7vw;
max-width: 27%;
bottom: 2vh;
}
#courses-right-hand-t{
right: 7vw;
max-width: 25%;
bottom: 3vh;
}
#courses-left-bottom-hand-t{
left: 11vw;
max-width: 27%;
top: 4.5vh;
}
#courses-right-bottom-hand-t{
right: 11vw;
max-width: 27%;
top: 5.5vh;
}
#gallery-left-hand-t{
max-width: 22%;
top: -30vh;
left: 10vw;
} 
#gallery-right-hand-t{
max-width: 30%;
bottom: 60vh;
right: 12vw;
}
#games-left-hand-t{
max-width: 24%;
left: 2vw;
top: -30vh;
}
#games-right-hand-t{
max-width: 24%;
right: 1vw;
bottom: 60vh;
}
.subPageleftDiv{
margin-right: 0;
}
.subPageContentLeft{
font-size: 3vmin;
text-align: center;
}
.coursesDiv{
flex-direction: column;
}
.imgDivMain{
width: 80%;
}
.imageDiv{
flex-flow: nowrap;
justify-content: space-evenly;
padding: 1.5vmin 0;
}
.imageDiv img{
max-width: 17%;
margin: 0;
}
.contentDiv{
width: 75%;
}
.subPageBoxLeft{
}
.subPageContent{
width: 100%;
font-size: 3vmin;
line-height: 1.5;
text-align: center;
}
#gameLinks{
display: none;
}
#gameLinksMob{
display: table;
width: 70%;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: 0;
}
#gameLinksMob td{
width: auto;
text-align: center;
padding: 1%;
}
.allPhotosDiv{
display: flex;
width: 75%;
height: 75%;
overflow-y: scroll;
transition: 0.3s;
}
.photolinks{
font-size: 3vmin;
}
.creditDiv{
width: 100%;
display: flex;
justify-content: center;
transform: rotateZ(0);
font-size: 2vmin;
position: absolute;
bottom:5vh;
left: 0;
}
#start {
margin: 5%;
height: 6vmax;
font-size: 2.25vmax;
}
#rules{
padding-left: 12%;
padding-right: 12%;
}
#gameplay{
flex-direction: column;
justify-content: center;
}
.optDiv{
height: 30%;
}
.ansOpts{
width: 42%;
height: 6vmax;
margin: 0 2% ;
}
#gameresult{
flex-direction: column;
justify-content: center;
}
.common-btns{
flex-direction: row;
margin: 3% 0;
}
.replay{
margin: 0 3%;
}
#buttons{
flex-direction: row;
}
.gameDiv{
width: 80%;
height: 65%;
}
.resultDiv{
width: 80%;
height: 65%;
}
#pageTitle{
display: none;
}
#pageTitleM{
display: flex;
flex-direction: column;
}
#todayTime{
width: 50%;
}
#timer{
width: 50%;
}
#timerDiv{
height: auto;
}
#title{
font-size: 2.5vmax;
}
#gameplay{
background-image: url(https://mathsquestactivities.com/wp-content/uploads/2021/01/about-bg-01-m.png);
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
flex-direction: column;
}
#board{
width: 80vw;
height: 60vh;
margin: 1.5vh 0;
}
#branding{
width: 100vw;
height: 15vh;
}
#optButtons{
width: 100vw;
height: 15vh;
align-items: center;
}
#btnGrp{
flex-direction: row;
}
}