/* screen.scss
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
/**
* Media queries
*/
/**
* Old Grid
* TODO: Remove this when removing old grid
* NOTE: grid still used on Kiosk
*/
/**
* Colours
*/
/**
* Typography
*/
/**
* Misc
*/
/*
Play Nintendo CSS Keyframes
=======================================
Author liamegan
email liam@wethecollective.com
Created 2014-08-14 10:53:39
Description .
Edited by liamegan
Edited 2016-03-15 10:03:04
*/
@-webkit-keyframes popupReveal {
0% {
max-height: 0;
max-width: 0;
opacity: 0;
}
50% {
max-height: 0;
max-width: 370px;
opacity: 1;
}
100% {
max-height: 60px;
max-width: 370px;
opacity: 1;
}
}
@-moz-keyframes popupReveal {
0% {
max-height: 0;
max-width: 0;
opacity: 0;
}
50% {
max-height: 0;
max-width: 370px;
opacity: 1;
}
100% {
max-height: 60px;
max-width: 370px;
opacity: 1;
}
}
@-o-keyframes popupReveal {
0% {
max-height: 0;
max-width: 0;
opacity: 0;
}
50% {
max-height: 0;
max-width: 370px;
opacity: 1;
}
100% {
max-height: 60px;
max-width: 370px;
opacity: 1;
}
}
@keyframes popupReveal {
0% {
max-height: 0;
max-width: 0;
opacity: 0;
}
50% {
max-height: 0;
max-width: 370px;
opacity: 1;
}
100% {
max-height: 60px;
max-width: 370px;
opacity: 1;
}
}
@-webkit-keyframes loadMoreRotation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(145deg);
-ms-transform: rotate(145deg);
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
50% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes loadMoreRotation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(145deg);
-ms-transform: rotate(145deg);
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
50% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes loadMoreRotation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(145deg);
-ms-transform: rotate(145deg);
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
50% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadMoreRotation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(145deg);
-ms-transform: rotate(145deg);
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
50% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%, 43% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@-moz-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%, 43% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@-o-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%, 43% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%, 43% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@-webkit-keyframes tada {
0% {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-moz-keyframes tada {
0% {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-o-keyframes tada {
0% {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
0% {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes tadadelay {
0% {
transform: scale3d(1, 1, 1);
}
1%, 2% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
3%, 5%, 7%, 9% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
4%, 6%, 8% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
10%, 100% {
transform: scale3d(1, 1, 1);
}
}
@-moz-keyframes tadadelay {
0% {
transform: scale3d(1, 1, 1);
}
1%, 2% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
3%, 5%, 7%, 9% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
4%, 6%, 8% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
10%, 100% {
transform: scale3d(1, 1, 1);
}
}
@-o-keyframes tadadelay {
0% {
transform: scale3d(1, 1, 1);
}
1%, 2% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
3%, 5%, 7%, 9% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
4%, 6%, 8% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
10%, 100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes tadadelay {
0% {
transform: scale3d(1, 1, 1);
}
1%, 2% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
3%, 5%, 7%, 9% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
4%, 6%, 8% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
10%, 100% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes morePleaseArrow {
0% {
background-position: 50% 50%;
}
15% {
background-position: 50% 20%;
}
20% {
background-position: 50% 75%;
}
25% {
background-position: 50% 50%;
}
100% {
background-position: 50% 50%;
}
}
@-moz-keyframes morePleaseArrow {
0% {
background-position: 50% 50%;
}
15% {
background-position: 50% 20%;
}
20% {
background-position: 50% 75%;
}
25% {
background-position: 50% 50%;
}
100% {
background-position: 50% 50%;
}
}
@-o-keyframes morePleaseArrow {
0% {
background-position: 50% 50%;
}
15% {
background-position: 50% 20%;
}
20% {
background-position: 50% 75%;
}
25% {
background-position: 50% 50%;
}
100% {
background-position: 50% 50%;
}
}
@keyframes morePleaseArrow {
0% {
background-position: 50% 50%;
}
15% {
background-position: 50% 20%;
}
20% {
background-position: 50% 75%;
}
25% {
background-position: 50% 50%;
}
100% {
background-position: 50% 50%;
}
}
@-webkit-keyframes morePleaseArrowB {
0% {
background-position-y: 50%;
}
30% {
background-position-y: 40%;
}
60% {
background-position-y: 70%;
}
100% {
background-position-y: 50%;
}
}
@-moz-keyframes morePleaseArrowB {
0% {
background-position-y: 50%;
}
30% {
background-position-y: 40%;
}
60% {
background-position-y: 70%;
}
100% {
background-position-y: 50%;
}
}
@-o-keyframes morePleaseArrowB {
0% {
background-position-y: 50%;
}
30% {
background-position-y: 40%;
}
60% {
background-position-y: 70%;
}
100% {
background-position-y: 50%;
}
}
@keyframes morePleaseArrowB {
0% {
background-position-y: 50%;
}
30% {
background-position-y: 40%;
}
60% {
background-position-y: 70%;
}
100% {
background-position-y: 50%;
}
}
@-webkit-keyframes shake {
0% {
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-webkit-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg);
}
10% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-moz-transform: translate(1px, 2px) rotate(0deg);
-ms-transform: translate(1px, 2px) rotate(0deg);
-webkit-transform: translate(1px, 2px) rotate(0deg);
transform: translate(1px, 2px) rotate(0deg);
}
40% {
-moz-transform: translate(3px, -1px) rotate(1deg);
-ms-transform: translate(3px, -1px) rotate(1deg);
-webkit-transform: translate(3px, -1px) rotate(1deg);
transform: translate(3px, -1px) rotate(1deg);
}
50% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-moz-transform: translate(-3px, 0px) rotate(0deg);
-ms-transform: translate(-3px, 0px) rotate(0deg);
-webkit-transform: translate(-3px, 0px) rotate(0deg);
transform: translate(-3px, 0px) rotate(0deg);
}
70% {
-moz-transform: translate(2px, 1px) rotate(-1deg);
-ms-transform: translate(2px, 1px) rotate(-1deg);
-webkit-transform: translate(2px, 1px) rotate(-1deg);
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-moz-keyframes shake {
0% {
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-webkit-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg);
}
10% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-moz-transform: translate(1px, 2px) rotate(0deg);
-ms-transform: translate(1px, 2px) rotate(0deg);
-webkit-transform: translate(1px, 2px) rotate(0deg);
transform: translate(1px, 2px) rotate(0deg);
}
40% {
-moz-transform: translate(3px, -1px) rotate(1deg);
-ms-transform: translate(3px, -1px) rotate(1deg);
-webkit-transform: translate(3px, -1px) rotate(1deg);
transform: translate(3px, -1px) rotate(1deg);
}
50% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-moz-transform: translate(-3px, 0px) rotate(0deg);
-ms-transform: translate(-3px, 0px) rotate(0deg);
-webkit-transform: translate(-3px, 0px) rotate(0deg);
transform: translate(-3px, 0px) rotate(0deg);
}
70% {
-moz-transform: translate(2px, 1px) rotate(-1deg);
-ms-transform: translate(2px, 1px) rotate(-1deg);
-webkit-transform: translate(2px, 1px) rotate(-1deg);
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-o-keyframes shake {
0% {
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-webkit-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg);
}
10% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-moz-transform: translate(1px, 2px) rotate(0deg);
-ms-transform: translate(1px, 2px) rotate(0deg);
-webkit-transform: translate(1px, 2px) rotate(0deg);
transform: translate(1px, 2px) rotate(0deg);
}
40% {
-moz-transform: translate(3px, -1px) rotate(1deg);
-ms-transform: translate(3px, -1px) rotate(1deg);
-webkit-transform: translate(3px, -1px) rotate(1deg);
transform: translate(3px, -1px) rotate(1deg);
}
50% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-moz-transform: translate(-3px, 0px) rotate(0deg);
-ms-transform: translate(-3px, 0px) rotate(0deg);
-webkit-transform: translate(-3px, 0px) rotate(0deg);
transform: translate(-3px, 0px) rotate(0deg);
}
70% {
-moz-transform: translate(2px, 1px) rotate(-1deg);
-ms-transform: translate(2px, 1px) rotate(-1deg);
-webkit-transform: translate(2px, 1px) rotate(-1deg);
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@keyframes shake {
0% {
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-webkit-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg);
}
10% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-moz-transform: translate(1px, 2px) rotate(0deg);
-ms-transform: translate(1px, 2px) rotate(0deg);
-webkit-transform: translate(1px, 2px) rotate(0deg);
transform: translate(1px, 2px) rotate(0deg);
}
40% {
-moz-transform: translate(3px, -1px) rotate(1deg);
-ms-transform: translate(3px, -1px) rotate(1deg);
-webkit-transform: translate(3px, -1px) rotate(1deg);
transform: translate(3px, -1px) rotate(1deg);
}
50% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-moz-transform: translate(-3px, 0px) rotate(0deg);
-ms-transform: translate(-3px, 0px) rotate(0deg);
-webkit-transform: translate(-3px, 0px) rotate(0deg);
transform: translate(-3px, 0px) rotate(0deg);
}
70% {
-moz-transform: translate(2px, 1px) rotate(-1deg);
-ms-transform: translate(2px, 1px) rotate(-1deg);
-webkit-transform: translate(2px, 1px) rotate(-1deg);
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-webkit-keyframes shakeDelay {
0% {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-moz-transform: translate(2px, 1px) rotate(1deg);
-ms-transform: translate(2px, 1px) rotate(1deg);
-webkit-transform: translate(2px, 1px) rotate(1deg);
transform: translate(2px, 1px) rotate(1deg);
}
91% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
92% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
93% {
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: translate(0px, 2px) rotate(0deg);
-webkit-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg);
}
94% {
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-webkit-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg);
}
95% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
96% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
97% {
-moz-transform: translate(2px, -2px) rotate(-1deg);
-ms-transform: translate(2px, -2px) rotate(-1deg);
-webkit-transform: translate(2px, -2px) rotate(-1deg);
transform: translate(2px, -2px) rotate(-1deg);
}
98% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
99% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-moz-keyframes shakeDelay {
0% {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-moz-transform: translate(2px, 1px) rotate(1deg);
-ms-transform: translate(2px, 1px) rotate(1deg);
-webkit-transform: translate(2px, 1px) rotate(1deg);
transform: translate(2px, 1px) rotate(1deg);
}
91% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
92% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
93% {
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: translate(0px, 2px) rotate(0deg);
-webkit-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg);
}
94% {
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-webkit-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg);
}
95% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
96% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
97% {
-moz-transform: translate(2px, -2px) rotate(-1deg);
-ms-transform: translate(2px, -2px) rotate(-1deg);
-webkit-transform: translate(2px, -2px) rotate(-1deg);
transform: translate(2px, -2px) rotate(-1deg);
}
98% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
99% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-o-keyframes shakeDelay {
0% {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-moz-transform: translate(2px, 1px) rotate(1deg);
-ms-transform: translate(2px, 1px) rotate(1deg);
-webkit-transform: translate(2px, 1px) rotate(1deg);
transform: translate(2px, 1px) rotate(1deg);
}
91% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
92% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
93% {
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: translate(0px, 2px) rotate(0deg);
-webkit-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg);
}
94% {
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-webkit-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg);
}
95% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
96% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
97% {
-moz-transform: translate(2px, -2px) rotate(-1deg);
-ms-transform: translate(2px, -2px) rotate(-1deg);
-webkit-transform: translate(2px, -2px) rotate(-1deg);
transform: translate(2px, -2px) rotate(-1deg);
}
98% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
99% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@keyframes shakeDelay {
0% {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-moz-transform: translate(2px, 1px) rotate(1deg);
-ms-transform: translate(2px, 1px) rotate(1deg);
-webkit-transform: translate(2px, 1px) rotate(1deg);
transform: translate(2px, 1px) rotate(1deg);
}
91% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg);
}
92% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
93% {
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: translate(0px, 2px) rotate(0deg);
-webkit-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg);
}
94% {
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-webkit-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg);
}
95% {
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
96% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-webkit-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg);
}
97% {
-moz-transform: translate(2px, -2px) rotate(-1deg);
-ms-transform: translate(2px, -2px) rotate(-1deg);
-webkit-transform: translate(2px, -2px) rotate(-1deg);
transform: translate(2px, -2px) rotate(-1deg);
}
98% {
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-webkit-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg);
}
99% {
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
-ms-transform: translate(1px, -2px) rotate(-1deg);
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-webkit-keyframes rubberbandSmall {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.1);
-ms-transform: scaleX(0.85) scaleY(1.1);
-webkit-transform: scaleX(0.85) scaleY(1.1);
transform: scaleX(0.85) scaleY(1.1);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.9);
-ms-transform: scaleX(1.1) scaleY(0.9);
-webkit-transform: scaleX(1.1) scaleY(0.9);
transform: scaleX(1.1) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes rubberbandSmall {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.1);
-ms-transform: scaleX(0.85) scaleY(1.1);
-webkit-transform: scaleX(0.85) scaleY(1.1);
transform: scaleX(0.85) scaleY(1.1);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.9);
-ms-transform: scaleX(1.1) scaleY(0.9);
-webkit-transform: scaleX(1.1) scaleY(0.9);
transform: scaleX(1.1) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes rubberbandSmall {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.1);
-ms-transform: scaleX(0.85) scaleY(1.1);
-webkit-transform: scaleX(0.85) scaleY(1.1);
transform: scaleX(0.85) scaleY(1.1);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.9);
-ms-transform: scaleX(1.1) scaleY(0.9);
-webkit-transform: scaleX(1.1) scaleY(0.9);
transform: scaleX(1.1) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberbandSmall {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.1);
-ms-transform: scaleX(0.85) scaleY(1.1);
-webkit-transform: scaleX(0.85) scaleY(1.1);
transform: scaleX(0.85) scaleY(1.1);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.9);
-ms-transform: scaleX(1.1) scaleY(0.9);
-webkit-transform: scaleX(1.1) scaleY(0.9);
transform: scaleX(1.1) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes rubberbandH {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleY(1.03) scaleX(0.85);
-ms-transform: scaleY(1.03) scaleX(0.85);
-webkit-transform: scaleY(1.03) scaleX(0.85);
transform: scaleY(1.03) scaleX(0.85);
}
40% {
-moz-transform: scaleY(0.85) scaleX(1.03);
-ms-transform: scaleY(0.85) scaleX(1.03);
-webkit-transform: scaleY(0.85) scaleX(1.03);
transform: scaleY(0.85) scaleX(1.03);
}
60% {
-moz-transform: scaleY(1.03) scaleX(0.9);
-ms-transform: scaleY(1.03) scaleX(0.9);
-webkit-transform: scaleY(1.03) scaleX(0.9);
transform: scaleY(1.03) scaleX(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes rubberbandH {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleY(1.03) scaleX(0.85);
-ms-transform: scaleY(1.03) scaleX(0.85);
-webkit-transform: scaleY(1.03) scaleX(0.85);
transform: scaleY(1.03) scaleX(0.85);
}
40% {
-moz-transform: scaleY(0.85) scaleX(1.03);
-ms-transform: scaleY(0.85) scaleX(1.03);
-webkit-transform: scaleY(0.85) scaleX(1.03);
transform: scaleY(0.85) scaleX(1.03);
}
60% {
-moz-transform: scaleY(1.03) scaleX(0.9);
-ms-transform: scaleY(1.03) scaleX(0.9);
-webkit-transform: scaleY(1.03) scaleX(0.9);
transform: scaleY(1.03) scaleX(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes rubberbandH {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleY(1.03) scaleX(0.85);
-ms-transform: scaleY(1.03) scaleX(0.85);
-webkit-transform: scaleY(1.03) scaleX(0.85);
transform: scaleY(1.03) scaleX(0.85);
}
40% {
-moz-transform: scaleY(0.85) scaleX(1.03);
-ms-transform: scaleY(0.85) scaleX(1.03);
-webkit-transform: scaleY(0.85) scaleX(1.03);
transform: scaleY(0.85) scaleX(1.03);
}
60% {
-moz-transform: scaleY(1.03) scaleX(0.9);
-ms-transform: scaleY(1.03) scaleX(0.9);
-webkit-transform: scaleY(1.03) scaleX(0.9);
transform: scaleY(1.03) scaleX(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberbandH {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleY(1.03) scaleX(0.85);
-ms-transform: scaleY(1.03) scaleX(0.85);
-webkit-transform: scaleY(1.03) scaleX(0.85);
transform: scaleY(1.03) scaleX(0.85);
}
40% {
-moz-transform: scaleY(0.85) scaleX(1.03);
-ms-transform: scaleY(0.85) scaleX(1.03);
-webkit-transform: scaleY(0.85) scaleX(1.03);
transform: scaleY(0.85) scaleX(1.03);
}
60% {
-moz-transform: scaleY(1.03) scaleX(0.9);
-ms-transform: scaleY(1.03) scaleX(0.9);
-webkit-transform: scaleY(1.03) scaleX(0.9);
transform: scaleY(1.03) scaleX(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes rubberbandV {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.04) scaleY(0.85);
-ms-transform: scaleX(1.04) scaleY(0.85);
-webkit-transform: scaleX(1.04) scaleY(0.85);
transform: scaleX(1.04) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.04);
-ms-transform: scaleX(0.85) scaleY(1.04);
-webkit-transform: scaleX(0.85) scaleY(1.04);
transform: scaleX(0.85) scaleY(1.04);
}
60% {
-moz-transform: scaleX(1.04) scaleY(0.9);
-ms-transform: scaleX(1.04) scaleY(0.9);
-webkit-transform: scaleX(1.04) scaleY(0.9);
transform: scaleX(1.04) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes rubberbandV {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.04) scaleY(0.85);
-ms-transform: scaleX(1.04) scaleY(0.85);
-webkit-transform: scaleX(1.04) scaleY(0.85);
transform: scaleX(1.04) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.04);
-ms-transform: scaleX(0.85) scaleY(1.04);
-webkit-transform: scaleX(0.85) scaleY(1.04);
transform: scaleX(0.85) scaleY(1.04);
}
60% {
-moz-transform: scaleX(1.04) scaleY(0.9);
-ms-transform: scaleX(1.04) scaleY(0.9);
-webkit-transform: scaleX(1.04) scaleY(0.9);
transform: scaleX(1.04) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes rubberbandV {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.04) scaleY(0.85);
-ms-transform: scaleX(1.04) scaleY(0.85);
-webkit-transform: scaleX(1.04) scaleY(0.85);
transform: scaleX(1.04) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.04);
-ms-transform: scaleX(0.85) scaleY(1.04);
-webkit-transform: scaleX(0.85) scaleY(1.04);
transform: scaleX(0.85) scaleY(1.04);
}
60% {
-moz-transform: scaleX(1.04) scaleY(0.9);
-ms-transform: scaleX(1.04) scaleY(0.9);
-webkit-transform: scaleX(1.04) scaleY(0.9);
transform: scaleX(1.04) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberbandV {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.04) scaleY(0.85);
-ms-transform: scaleX(1.04) scaleY(0.85);
-webkit-transform: scaleX(1.04) scaleY(0.85);
transform: scaleX(1.04) scaleY(0.85);
}
40% {
-moz-transform: scaleX(0.85) scaleY(1.04);
-ms-transform: scaleX(0.85) scaleY(1.04);
-webkit-transform: scaleX(0.85) scaleY(1.04);
transform: scaleX(0.85) scaleY(1.04);
}
60% {
-moz-transform: scaleX(1.04) scaleY(0.9);
-ms-transform: scaleX(1.04) scaleY(0.9);
-webkit-transform: scaleX(1.04) scaleY(0.9);
transform: scaleX(1.04) scaleY(0.9);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes rubberbandBig {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.03) scaleY(0.88);
-ms-transform: scaleX(1.03) scaleY(0.88);
-webkit-transform: scaleX(1.03) scaleY(0.88);
transform: scaleX(1.03) scaleY(0.88);
}
40% {
-moz-transform: scaleX(0.88) scaleY(1.03);
-ms-transform: scaleX(0.88) scaleY(1.03);
-webkit-transform: scaleX(0.88) scaleY(1.03);
transform: scaleX(0.88) scaleY(1.03);
}
60% {
-moz-transform: scaleX(1.03) scaleY(0.92);
-ms-transform: scaleX(1.03) scaleY(0.92);
-webkit-transform: scaleX(1.03) scaleY(0.92);
transform: scaleX(1.03) scaleY(0.92);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes rubberbandBig {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.03) scaleY(0.88);
-ms-transform: scaleX(1.03) scaleY(0.88);
-webkit-transform: scaleX(1.03) scaleY(0.88);
transform: scaleX(1.03) scaleY(0.88);
}
40% {
-moz-transform: scaleX(0.88) scaleY(1.03);
-ms-transform: scaleX(0.88) scaleY(1.03);
-webkit-transform: scaleX(0.88) scaleY(1.03);
transform: scaleX(0.88) scaleY(1.03);
}
60% {
-moz-transform: scaleX(1.03) scaleY(0.92);
-ms-transform: scaleX(1.03) scaleY(0.92);
-webkit-transform: scaleX(1.03) scaleY(0.92);
transform: scaleX(1.03) scaleY(0.92);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes rubberbandBig {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.03) scaleY(0.88);
-ms-transform: scaleX(1.03) scaleY(0.88);
-webkit-transform: scaleX(1.03) scaleY(0.88);
transform: scaleX(1.03) scaleY(0.88);
}
40% {
-moz-transform: scaleX(0.88) scaleY(1.03);
-ms-transform: scaleX(0.88) scaleY(1.03);
-webkit-transform: scaleX(0.88) scaleY(1.03);
transform: scaleX(0.88) scaleY(1.03);
}
60% {
-moz-transform: scaleX(1.03) scaleY(0.92);
-ms-transform: scaleX(1.03) scaleY(0.92);
-webkit-transform: scaleX(1.03) scaleY(0.92);
transform: scaleX(1.03) scaleY(0.92);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberbandBig {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.03) scaleY(0.88);
-ms-transform: scaleX(1.03) scaleY(0.88);
-webkit-transform: scaleX(1.03) scaleY(0.88);
transform: scaleX(1.03) scaleY(0.88);
}
40% {
-moz-transform: scaleX(0.88) scaleY(1.03);
-ms-transform: scaleX(0.88) scaleY(1.03);
-webkit-transform: scaleX(0.88) scaleY(1.03);
transform: scaleX(0.88) scaleY(1.03);
}
60% {
-moz-transform: scaleX(1.03) scaleY(0.92);
-ms-transform: scaleX(1.03) scaleY(0.92);
-webkit-transform: scaleX(1.03) scaleY(0.92);
transform: scaleX(1.03) scaleY(0.92);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes rubberbandBigger {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.2) scaleY(0.7);
-ms-transform: scaleX(1.2) scaleY(0.7);
-webkit-transform: scaleX(1.2) scaleY(0.7);
transform: scaleX(1.2) scaleY(0.7);
}
40% {
-moz-transform: scaleX(0.7) scaleY(1.2);
-ms-transform: scaleX(0.7) scaleY(1.2);
-webkit-transform: scaleX(0.7) scaleY(1.2);
transform: scaleX(0.7) scaleY(1.2);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes rubberbandBigger {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.2) scaleY(0.7);
-ms-transform: scaleX(1.2) scaleY(0.7);
-webkit-transform: scaleX(1.2) scaleY(0.7);
transform: scaleX(1.2) scaleY(0.7);
}
40% {
-moz-transform: scaleX(0.7) scaleY(1.2);
-ms-transform: scaleX(0.7) scaleY(1.2);
-webkit-transform: scaleX(0.7) scaleY(1.2);
transform: scaleX(0.7) scaleY(1.2);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes rubberbandBigger {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.2) scaleY(0.7);
-ms-transform: scaleX(1.2) scaleY(0.7);
-webkit-transform: scaleX(1.2) scaleY(0.7);
transform: scaleX(1.2) scaleY(0.7);
}
40% {
-moz-transform: scaleX(0.7) scaleY(1.2);
-ms-transform: scaleX(0.7) scaleY(1.2);
-webkit-transform: scaleX(0.7) scaleY(1.2);
transform: scaleX(0.7) scaleY(1.2);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberbandBigger {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-moz-transform: scaleX(1.2) scaleY(0.7);
-ms-transform: scaleX(1.2) scaleY(0.7);
-webkit-transform: scaleX(1.2) scaleY(0.7);
transform: scaleX(1.2) scaleY(0.7);
}
40% {
-moz-transform: scaleX(0.7) scaleY(1.2);
-ms-transform: scaleX(0.7) scaleY(1.2);
-webkit-transform: scaleX(0.7) scaleY(1.2);
transform: scaleX(0.7) scaleY(1.2);
}
60% {
-moz-transform: scaleX(1.1) scaleY(0.85);
-ms-transform: scaleX(1.1) scaleY(0.85);
-webkit-transform: scaleX(1.1) scaleY(0.85);
transform: scaleX(1.1) scaleY(0.85);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes colours {
0% {
background-color: #b54bff;
}
20% {
background-color: #fff000;
}
40% {
background-color: #1dd47c;
}
60% {
background-color: #f42f2f;
}
80% {
background-color: #00bff3;
}
100% {
background-color: #b54bff;
}
}
@keyframes colours {
0% {
background-color: #b54bff;
}
20% {
background-color: #fff000;
}
40% {
background-color: #1dd47c;
}
60% {
background-color: #f42f2f;
}
80% {
background-color: #00bff3;
}
100% {
background-color: #b54bff;
}
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px);
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@-webkit-keyframes bounce-arrow {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@-moz-keyframes bounce-arrow {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@-o-keyframes bounce-arrow {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes bounce-arrow {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@-webkit-keyframes open-search-label {
0% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
50% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
51% {
opacity: 1;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
100% {
margin: 20px 0px 0px calc(0% + 30px);
width: calc(100% - 90px);
}
}
@-moz-keyframes open-search-label {
0% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
50% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
51% {
opacity: 1;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
100% {
margin: 20px 0px 0px calc(0% + 30px);
width: calc(100% - 90px);
}
}
@-o-keyframes open-search-label {
0% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
50% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
51% {
opacity: 1;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
100% {
margin: 20px 0px 0px calc(0% + 30px);
width: calc(100% - 90px);
}
}
@keyframes open-search-label {
0% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
50% {
opacity: 0;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
51% {
opacity: 1;
margin: 20px 0px 0px calc(88% - 70px);
width: 12%;
}
100% {
margin: 20px 0px 0px calc(0% + 30px);
width: calc(100% - 90px);
}
}
@-webkit-keyframes open-search-yoshi {
0% {
background-position: 70px bottom;
}
50% {
background-position: 20px bottom;
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes open-search-yoshi {
0% {
background-position: 70px bottom;
}
50% {
background-position: 20px bottom;
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-o-keyframes open-search-yoshi {
0% {
background-position: 70px bottom;
}
50% {
background-position: 20px bottom;
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes open-search-yoshi {
0% {
background-position: 70px bottom;
}
50% {
background-position: 20px bottom;
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#main-site-footer .social {
display: none;
}
#main-site-footer .social .share {
background: transparent;
}
#main-site-footer .social .URLShare {
display: none !important;
}
footer#main-site-footer {
color: var(--colour-white);
position: relative;
background-color: var(--colour-red);
background: linear-gradient(180deg, var(--colour-red) 0%, #a80b04 100%);
height: auto;
min-height: 145px;
padding: 48px 0 19.4px;
margin-top: 140px;
text-align: center;
}
footer#main-site-footer .row {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
footer#main-site-footer .col2,
footer#main-site-footer .col8,
footer#main-site-footer .col1,
footer#main-site-footer .col12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
}
footer#main-site-footer .back-to-top {
left: -webkit-calc(50% - 4em);
left: calc(50% - 4em);
top: -2.5em;
position: absolute;
width: 8em;
z-index: 2;
}
footer#main-site-footer .back-to-top #backtotop_interaction {
-moz-transform: translateY(-25px);
-ms-transform: translateY(-25px);
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
bottom: 0px;
height: 150%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1;
/* @include transition(all .5s cubic-bezier(0,.28,0,1)); */
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-choropo {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-diddy {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-kirby-rocket {
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-shyguy {
-moz-transform: translateY(-35px);
-ms-transform: translateY(-35px);
-webkit-transform: translateY(-35px);
transform: translateY(-35px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-squid {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-peach {
-moz-transform: translateY(-25px);
-ms-transform: translateY(-25px);
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-luigi {
-moz-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-webkit-transform: translateY(-45px);
transform: translateY(-45px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-mario {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
footer#main-site-footer .back-to-top #backtotop_interaction.backtotop-tatl {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
height: 200%;
}
footer#main-site-footer .back-to-top #backtotop_interaction .dot {
-moz-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
-o-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
-webkit-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
background-color: #fff;
border-radius: 50%;
position: absolute;
height: 5px;
width: 5px;
z-index: 1;
left: 40%;
top: 80px;
pointer-events: none;
}
footer#main-site-footer .back-to-top #backtotop_interaction .dot.fadeout {
opacity: 0;
}
footer#main-site-footer .back-to-top #backtotop_interaction img,
footer#main-site-footer .back-to-top #backtotop_interaction .img {
left: 0px;
width: 100%;
position: absolute;
top: 20px;
}
footer#main-site-footer .back-to-top.allowhover:hover, footer#main-site-footer .back-to-top.allowhover:focus {
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction {
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
height: 160%;
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-choropo, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-choropo {
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-diddy, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-diddy {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-kirby-rocket, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-kirby-rocket {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-shyguy, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-shyguy {
-moz-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-webkit-transform: translateY(-45px);
transform: translateY(-45px);
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-squid, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-squid {
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-peach, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-peach {
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-luigi, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-luigi {
-moz-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-webkit-transform: translateY(-45px);
transform: translateY(-45px);
height: 220%;
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-mario, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-mario {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
height: 180%;
}
footer#main-site-footer .back-to-top.allowhover:hover #backtotop_interaction.backtotop-tatl, footer#main-site-footer .back-to-top.allowhover:focus #backtotop_interaction.backtotop-tatl {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
height: 230%;
}
footer#main-site-footer .back-to-top.transforming {
-moz-transition: linear 0.3s height;
-o-transition: linear 0.3s height;
-webkit-transition: linear 0.3s height;
transition: linear 0.3s height;
overflow: visible;
}
footer#main-site-footer .back-to-top.transforming #backtotop_interaction {
/* @include transition(0.3s linear height); */
/* height: 350px; */
overflow: hidden;
}
footer#main-site-footer .back-to-top.transforming:hover #backtotop_interaction, footer#main-site-footer .back-to-top.transforming:focus #backtotop_interaction {
/*overflow: visible;
@include transform(none);*/
}
footer#main-site-footer .back-to-top a {
border-radius: 3em;
}
footer#main-site-footer .back-to-top span {
display: flex;
justify-content: center;
align-items: center;
padding-right: 0;
padding-left: 0;
font-size: 1.125rem;
}
footer#main-site-footer .back-to-top .icon-arrow-top {
background: url("../svg/icon-up-arrow.f67e329ff97c933a.svg");
width: 16px;
height: 20px;
margin-left: 6px;
}
footer#main-site-footer a#backtotop {
color: var(--colour-black);
display: inline-block;
font-size: 13px;
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 2;
}
footer#main-site-footer p.cta {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
display: none;
font-size: 1.4rem;
margin: 10px 0 30px;
}
footer#main-site-footer p.cta a,
footer#main-site-footer p.cta a:visited {
color: #fff;
font-size: 1.4rem;
}
footer#main-site-footer p.cta a:hover, footer#main-site-footer p.cta a:focus,
footer#main-site-footer p.cta a:visited:hover,
footer#main-site-footer p.cta a:visited:focus {
color: var(--colour-red);
}
footer#main-site-footer ul {
margin-bottom: 15px;
}
footer#main-site-footer ul li {
display: block;
padding: 0 10px;
}
footer#main-site-footer a {
font-size: 16px;
line-height: 1.6em;
}
footer#main-site-footer .footer-logo-nintendo {
color: var(--colour-white);
display: block;
margin: 30px auto;
text-decoration: none;
width: 120px;
}
footer#main-site-footer .footer-logo-nintendo__icon {
display: block;
}
footer#main-site-footer .footer-logo-esrb {
display: block;
margin: 0 0 0 auto;
width: 60px;
}
footer#main-site-footer .footer-social-title {
margin: 30px 0 10px 0;
}
footer#main-site-footer .footer-social {
align-items: center;
display: flex;
gap: 10px;
justify-content: center;
margin: 0 0 40px 0;
}
footer#main-site-footer .footer-social__anchor {
color: var(--colour-white);
display: block;
position: relative;
text-decoration: none;
width: 34px;
}
@media (hover: hover) {
footer#main-site-footer .footer-social__anchor:hover {
opacity: 0.7;
}
}
footer#main-site-footer .footer-social__icon {
display: block;
aspect-ratio: 1/1;
width: 100%;
}
footer#main-site-footer .footer-copyright ul {
line-height: 1.6em;
font-size: 12px;
margin-top: 21.2px;
}
footer#main-site-footer .footer-copyright li {
display: block;
padding: 0;
}
footer#main-site-footer .footer-copyright li:not(:last-of-type) {
margin-bottom: 8px;
}
footer#main-site-footer .footer-copyright a {
font-size: inherit;
}
footer#main-site-footer .footer-esrb {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--colour-black);
text-decoration: none;
}
footer#main-site-footer .footer-esrb__img {
margin: 0;
display: block;
}
footer#main-site-footer .footer-esrb__descriptors {
display: flex;
flex-direction: column;
gap: 2px;
}
footer#main-site-footer .footer-esrb__content {
color: var(--colour-white);
max-width: 15rem;
text-align: left;
font-size: 0.875rem;
line-height: 1.5;
}
footer#main-site-footer .footer-esrb__content + .footer-esrb__content {
border-top: solid 1px currentColor;
padding-top: 2px;
}
@media only screen and (min-width: 43.063em) {
footer#main-site-footer .back-to-top {
left: auto;
right: 15px;
}
footer#main-site-footer a#backtotop {
font-size: 16px;
}
footer#main-site-footer p.cta {
display: block;
}
footer#main-site-footer .col2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 16.66667%;
width: 16.66667%;
}
footer#main-site-footer .col8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 66.66667%;
width: 66.66667%;
}
footer#main-site-footer .col1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 8.33333%;
width: 8.33333%;
margin-left: 8.33333%;
}
footer#main-site-footer ul li {
display: inline-block;
}
footer#main-site-footer a {
font-size: 14px;
}
footer#main-site-footer ul.footer-links:first-child {
margin-top: 30px;
}
}
@media only screen and (max-width: 43em) {
footer#main-site-footer {
padding: 48px 0 35.2px;
}
footer#main-site-footer a.footer-logo-esrb {
margin: 18px auto 0;
}
footer#main-site-footer ul.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 0px;
font-size: 15px;
}
footer#main-site-footer ul.footer-links li {
padding: 0;
margin: 0 8px 8px 8px;
}
}
@media only screen and (min-width: 77.063em) {
footer p.cta {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
font-size: 1.4em;
}
}
/* RESPONSIVE HOOKS
* ================
*/
body::after {
content: "small";
display: none;
position: fixed;
padding: 10px;
background: #fff;
bottom: 0px;
right: 0px;
z-index: 9999;
}
@media only screen and (min-width: 43.063em) {
body::after {
content: "medium, small";
}
}
@media only screen and (min-width: 60em) {
body::after {
content: "medium";
}
}
@media only screen and (min-width: 77.063em) {
body::after {
content: "large";
}
}
@media only screen and (min-width: 100.063em) {
body::after {
content: "xlarge";
}
}
@media only screen and (min-width: 140.063em) {
body::after {
content: "xxlarge";
}
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
:root {
--font-weight-bold: 700;
--font-weight-normal: 500;
--font-family-main: "museo-sans", sans-serif;
--colour-blue: #00D2FF;
--colour-red: #EE0500;
--colour-green: #1DDB81;
--colour-yellow: #FFF000;
--colour-purple: #B42FF5;
--colour-lightgrey: #DADADA;
--colour-midgrey: #B6B6B6;
--colour-grey: #484848;
--colour-black: #000;
--colour-white: #fff;
--colour-surface: #F1F1F1;
--colour-awbnq: #fbfbfb;
--colour-correct: #1DDB81;
--colour-selected: #FFF000;
--colour-incorrect: #EE0500;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
:focus:not(:focus-visible) {
box-shadow: none;
}
body {
background: url("../png/scribble-pattern.bfc342e745de933a.png");
}
body.play-scroll-not-top #top {
-moz-transform: translateY(-130px);
-ms-transform: translateY(-130px);
-webkit-transform: translateY(-130px);
transform: translateY(-130px);
}
body.play-scroll-built #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
#top {
-moz-transition: -moz-transform 0.8s cubic-bezier(0.6, 0, 0.4, 1);
-o-transition: -o-transform 0.8s cubic-bezier(0.6, 0, 0.4, 1);
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.6, 0, 0.4, 1);
transition: transform 0.8s cubic-bezier(0.6, 0, 0.4, 1);
background: #fff;
position: fixed;
top: 0px;
z-index: 10002;
width: 100%;
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
@media only screen and (max-width: 43em) {
body.play-scroll-not-top #top {
-moz-transform: translateY(-150px);
-ms-transform: translateY(-150px);
-webkit-transform: translateY(-150px);
transform: translateY(-150px);
}
body.play-scroll-built #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@media only screen and (min-width: 43.063em) and (max-width: 77em) {
body.play-scroll-not-top #top {
-moz-transform: translateY(-125px);
-ms-transform: translateY(-125px);
-webkit-transform: translateY(-125px);
transform: translateY(-125px);
}
body.play-scroll-built #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@media only screen and (min-width: 43.063em) {
body.play-scroll-not-top #top {
-moz-transform: translateY(-165px);
-ms-transform: translateY(-165px);
-webkit-transform: translateY(-165px);
transform: translateY(-165px);
}
body.play-scroll-not-top #top:hover, body.play-scroll-not-top #top:focus {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
body.play-scroll-built #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@media screen and (max-width: 768px) {
body.play-scroll-not-top #top {
-moz-transform: translateY(-190px);
-ms-transform: translateY(-190px);
-webkit-transform: translateY(-190px);
transform: translateY(-190px);
}
body.play-scroll-built #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@media only screen and (max-height: 400px) {
#top {
position: absolute;
top: 0;
left: 0;
}
body.play-scroll-not-top #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
body.play-scroll-built #top {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
html {
font-size: 16px;
}
body {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-normal);
line-height: 1.4;
color: var(--colour-black);
}
p {
font-size: 0.9375rem;
margin: 0 0 0.5em 0;
}
p.legal {
font-size: 0.75rem;
}
p.large {
font-size: 2.5rem;
}
p.large strong {
color: va(--colour-red);
}
li a,
p a {
color: inherit;
text-decoration: underline;
}
i,
cite,
em,
var,
address,
dfn {
font-style: italic !important;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
margin: 0 0 0.4em 0;
}
h1,
.h1 {
font-size: 2rem;
}
h2,
.h2 {
font-size: 1.5rem;
}
h3,
.h3 {
font-size: 1.25rem;
}
h4,
.h4 {
font-size: 1rem;
}
.text-center {
text-align: center;
}
@font-face {
font-family: "icons";
src: url("../eot/icons.bb03f92b6c49.eot");
src: url("../eot/icons.bb03f92b6c49d41d.eot#iefix") format("embedded-opentype"), url("../ttf/icons.82aecdda782a.ttf") format("truetype"), url("../woff/icons.f82513c90ada.woff") format("woff");
font-weight: normal;
font-style: normal;
}
[class*="iconf-"] {
font-family: "icons";
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class*="iconf-"]::before {
content: " ";
display: block;
position: absolute;
text-indent: 0;
}
/* Logos */
/* add nbsp after to fix android bug */
.iconf-nintendo::before {
content: "\e617\00a0";
}
.iconf-facebook::before {
content: "\e616";
}
.iconf-instagram::before {
content: "\e615";
}
.iconf-tumblr::before {
content: "\e614";
}
.iconf-twitter::before {
content: "\e613";
}
.iconf-youtube::before {
content: "\e612";
}
.iconf-3ds::before {
content: "\e619";
}
.iconf-wiiu::before {
content: "\e61a";
}
/* eshop classes need to be wrapped in a .logo-eshop class defined in widgets.css */
.iconf-eshop-nin::before {
content: "\e61e";
}
.iconf-eshop::before {
content: "\e61f";
}
@media only screen and (min-width: 43.063em) {
p {
font-size: 1rem;
}
h1,
.h1 {
font-size: 2.5rem;
}
h2,
.h2 {
font-size: 2rem;
}
h3,
.h3 {
font-size: 1.5rem;
}
h4,
.h4 {
font-size: 1.125rem;
}
}
@media only screen and (min-width: 77.063em) {
h1,
.h1 {
font-size: 3rem;
}
h2,
.h2 {
font-size: 2.5rem;
}
h3,
.h3 {
font-size: 1.75rem;
}
h4,
.h4 {
font-size: 1.25rem;
}
}
.controlpanel input {
display: none;
}
.controlpanel input:checked ~ ul {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
}
.controlpanel label {
margin-bottom: 20px;
}
.controlpanel ul {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: none;
flex-wrap: nowrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: stretch;
-webkit-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
display: none;
background: RGBA(255, 255, 255, 0.9);
left: 0px;
height: calc(100% - 82px);
position: absolute;
top: 82px;
width: 100%;
z-index: 10;
}
.controlpanel ul li {
margin-bottom: 0.2em;
}
.controlpanel ul li.title {
font-size: 1.2em;
margin-top: 0.5em;
}
.controlpanel .button {
margin: 0;
}
a.backbutton {
color: var(--colour-grey);
display: inline-block;
margin: 0.5em 0 1em 10px;
padding-left: 7px;
padding: 10px;
position: relative;
text-decoration: none;
}
a.backbutton::after {
border: solid transparent;
border-color: rgba(16, 22, 25, 0);
border-right-color: var(--colour-grey);
border-width: 7px;
content: " ";
height: 0;
margin-top: -7px;
pointer-events: none;
position: absolute;
right: 100%;
top: 50%;
width: 0;
}
.button {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
background: var(--colour-white);
border-color: var(--colour-selected);
border-radius: 2em;
color: var(--colour-black);
display: inline-block;
margin: 0.5em 0px 1em;
padding: 13px 24px;
text-decoration: none;
}
.button:hover, .button:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.button:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.button:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.button:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.button.disabled {
border-color: #959595;
cursor: default;
opacity: 0.5;
pointer-events: none;
}
.button:hover {
cursor: pointer;
}
@media only screen and (min-width: 60em) {
.button.disabled:hover, .button.disabled:focus {
background-color: var(--colour-white);
}
}
@media screen and (min-width: 1540px) {
.controlpanel label {
margin: 0;
right: calc(100% + 20px);
position: absolute;
top: 5px;
z-index: 9;
white-space: pre;
}
.controlpanel ul {
height: 100%;
top: 0;
}
}
.medium-show,
.medium-up-show,
.large-show,
.large-up-show {
display: none;
}
@media only screen and (min-width: 43.063em) and (max-width: 77em) {
.medium-show {
display: initial;
}
}
@media only screen and (min-width: 43.063em) {
.small-show {
display: none;
}
.medium-up-show {
display: initial;
}
}
@media only screen and (min-width: 77.063em) and (max-width: 100em) {
.large-show {
display: initial;
}
}
@media only screen and (min-width: 77.063em) {
.large-up-show {
display: initial;
}
.medium-down-show {
display: none !important;
}
}
.content-area a:not(.static), .a-box, .page-header__desc a, .page-activity__content a {
display: inline-block;
position: relative;
z-index: 1;
}
.content-area a:not(.static)::before, .a-box::before, .page-header__desc a::before, .page-activity__content a::before {
transform: scale(0);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: cubic-bezier(0.25, 0.25, 0.325, 1.39);
box-sizing: content-box;
content: "";
height: 100%;
left: -3px;
opacity: 0;
position: absolute;
top: 0;
width: calc(100% + 6px);
z-index: -1;
}
.content-area a:hover:not(.static), .a-box:hover, .page-header__desc a:hover, .page-activity__content a:hover, .content-area a:focus:not(.static), .a-box:focus, .page-header__desc a:focus, .page-activity__content a:focus {
opacity: 1;
text-decoration: none;
}
.content-area a:not(.static):hover::before, .a-box:hover::before, .page-header__desc a:hover::before, .page-activity__content a:hover::before, .content-area a:not(.static):focus::before, .a-box:focus::before, .page-header__desc a:focus::before, .page-activity__content a:focus::before {
transform: scale(1);
opacity: 1;
}
.content-area a:focus:not(.static), .a-box:focus, .page-header__desc a:focus, .page-activity__content a:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.content-area a:focus:not(:focus-visible):not(.static), .a-box:focus:not(:focus-visible), .page-header__desc a:focus:not(:focus-visible), .page-activity__content a:focus:not(:focus-visible) {
box-shadow: none;
}
.a-box, .page-header.light .page-header__desc a {
color: white;
}
.a-box::before, .page-header.light .page-header__desc a::before {
background-color: white;
}
.a-box:hover, .page-header.light .page-header__desc a:hover, .a-box:focus, .page-header.light .page-header__desc a:focus {
color: var(--colour-grey);
}
.content-area a:not(.static), .dark .a-box, .page-header.dark .page-header__desc a, .page-activity__content a {
color: var(--colour-grey);
}
.content-area a:not(.static)::before, .dark .a-box::before, .page-header.dark .page-header__desc a::before, .page-activity__content a::before {
background-color: var(--colour-grey);
}
.content-area a:hover:not(.static), .dark .a-box:hover, .page-header.dark .page-header__desc a:hover, .page-activity__content a:hover, .content-area a:focus:not(.static), .dark .a-box:focus, .page-header.dark .page-header__desc a:focus, .page-activity__content a:focus {
color: #fff;
}
.content-area h1.centered, .content-area h2.centered, .content-area h3.centered, .content-area p.centered, .content-area li.centered {
text-align: center;
}
.content-area img {
height: auto;
}
.content-area img.img-left, .content-area img.img-right, .content-area img.img-center {
float: none;
clear: both;
display: block;
margin: 10px auto;
}
.content-area img.img-full {
max-width: 100%;
}
.content-area img.img-wide {
width: 100%;
}
.content-area .small-only {
display: block;
}
.content-area .medium-up,
.content-area .medium-only,
.content-area .large-up,
.content-area .large-only,
.content-area .xlarge-up,
.content-area .xlarge-only {
display: none;
}
.content-area em {
font-style: italic;
}
.content-area strong {
font-weight: var(--font-weight-bold);
}
.content-area ol,
.content-area ul {
list-style: decimal;
margin: 1em 1.5em 1em 0;
}
.content-area olul,
.content-area ulul {
list-style: disc;
}
.content-area ol li,
.content-area ul li {
margin-bottom: 0.5em;
transform: translateX(1.2em);
}
.content-area ul {
list-style: disc;
}
.content-area p.largetext {
font-size: 1.6em;
}
.content-area p.legaltext {
font-size: 0.75rem;
}
.content-area .video-container {
margin-bottom: 1em !important;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.content-area .video-container iframe {
height: 100% !important;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.content-area iframe {
max-width: 100%;
}
.content-area .rule,
.content-area .clearer {
clear: both;
display: block;
float: none;
margin: 0;
height: 1px;
padding: 0;
}
.content-area .rule {
background: #CCC;
margin: 1em 0;
height: 2px;
}
.content-area blockquote {
border-left: 1px solid #CCC;
clear: both;
margin: 1em;
padding-left: 1em;
font-style: italic;
}
.content-area .wysiwyg-3-col > div {
margin-top: 1em;
}
.content-area .wysiwyg-3-col > div img {
width: 100%;
}
.content-area.tinyMCE {
border: 1px dashed #FFEEAA;
margin: 10px auto;
width: 800px;
padding: 10px;
}
.content-area.tinyMCE .small-only {
border: 1px dashed #FFF000;
opacity: 0.3;
}
.content-area.tinyMCE .small-only::before {
background: #CCC;
border: 1px solid #BBB;
content: 'Content set to display at small sizes only';
display: block;
}
.content-area.tinyMCE .medium-up,
.content-area.tinyMCE .medium-only,
.content-area.tinyMCE .large-up,
.content-area.tinyMCE .large-only,
.content-area.tinyMCE .xlarge-up,
.content-area.tinyMCE .xlarge-only {
display: block;
}
@media only screen and (min-width: 43.063em) {
.content-area .video-container {
margin: 0px auto;
padding-bottom: 50.652%;
width: 90%;
}
.content-area .small-only {
display: none;
}
.content-area .medium-up,
.content-area .medium-only,
.content-area .small-medium-only {
display: block;
}
.content-area .wysiwyg-3-col {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
background: none;
border: none;
padding-top: 0px;
margin-bottom: 1em;
margin-top: 1em;
margin-left: -0.625rem;
margin-right: -0.625rem;
width: calc(100% + 0.625rem * 2);
}
.content-area .wysiwyg-3-col > div {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 33.33333%;
width: 33.33333%;
margin-left: 0;
margin-top: 0;
}
}
@media only screen and (min-width: 60em) {
.content-area img.img-left {
float: left;
margin: 0px 1em 1em 0px;
}
.content-area img.img-right {
float: right;
margin: 0px 0px 1em 1em;
}
}
@media only screen and (min-width: 77.063em) {
.content-area .video-container {
padding-bottom: 33.75%;
position: relative;
width: 60%;
}
.content-area .small-only,
.content-area .medium-only,
.content-area .small-medium-only {
display: none;
}
.content-area .medium-up,
.content-area .large-up {
display: block;
}
.content-area .gallery {
max-width: 83.33333%;
margin: 0 auto;
}
}
.gallery {
position: relative;
}
.gallery-switcher {
background-color: var(--colour-lightgrey);
height: 0;
padding-bottom: 50%;
position: relative;
}
.gallery__nav {
display: none;
}
.gallery-wrapper {
height: 100%;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 100%;
}
.gallery-images {
height: 100%;
transition: transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
}
.gallery-images.notransition {
transition: none !important;
}
.gallery-images .image {
display: block;
float: left;
height: 100%;
position: relative;
width: 100%;
}
.gallery-images .image img {
display: block;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery__caption {
background: rGBA(0, 0, 0, 0.5);
color: #fff;
padding: 4px 16px 8px;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
width: 100%;
}
.gallery__caption .detail {
width: 100%;
font-size: 1em;
}
.gallery__caption.hidden {
display: none;
}
.gallery__thumbnails {
display: none;
}
@media only screen and (max-width: 43em) {
.gallery__caption {
margin-top: 0px !important;
}
}
@media only screen and (min-width: 43.063em) {
.gallery__nav {
display: block;
appearance: none;
background: transparent;
padding: 0;
border: none;
top: calc(50% - 25px);
height: 50px;
width: 50px;
z-index: 2;
position: absolute;
cursor: pointer;
transform-origin: right center;
}
.gallery__nav .icon {
transition: filter 0.2s ease-out;
transition-property: transform, filter;
min-width: 0;
will-change: filter, transform;
}
.gallery__nav[disabled="true"] {
opacity: 0.3;
}
.gallery__nav:hover:not([disabled]) .icon, .gallery__nav:focus .icon {
transform: translateY(-4px);
filter: drop-shadow(0 8px 0 var(--colour-black));
}
.gallery__nav:active:not([disabled]) .icon {
transform: translateY(4px);
filter: drop-shadow(0 0px 0 var(--colour-black));
}
.gallery__nav--left {
left: 10px;
}
.gallery__nav--right {
transform-origin: left center;
right: 10px;
}
.gallery__thumbnails {
display: block;
overflow: hidden;
margin-top: 16px;
}
.gallery__thumbnails ul {
-moz-transition: -moz-transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
-o-transition: -o-transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
transition: transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
}
.gallery__thumbnails ul.notransition {
-moz-transition: none !important;
-o-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
}
.gallery__thumbnails li {
display: inline-block;
position: relative;
padding: 10px;
}
.gallery__thumbnails li.sel {
background-color: var(--colour-selected);
}
.gallery__thumbnails li.sel button {
--shadow-color: var(--colour-selected);
transition-property: transform;
}
.gallery__thumbnails li.sel button:hover, .gallery__thumbnails li.sel button:active, .gallery__thumbnails li.sel button:focus {
transform: none;
}
.gallery__thumbnails button {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
appearance: none;
background: white;
display: block;
padding: 0;
cursor: pointer;
margin: 0;
}
.gallery__thumbnails button:hover, .gallery__thumbnails button:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.gallery__thumbnails button:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.gallery__thumbnails button:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.gallery__thumbnails button:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
}
@media only screen and (min-width: 77.063em) {
.gallery__nav {
height: 70px;
width: 70px;
}
.gallery__nav--left {
left: -86px;
}
.gallery__nav--right {
right: -86px;
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-gap: 20px;
grid-auto-flow: dense;
justify-content: center;
margin: 0 auto;
max-width: 330px;
padding: 10px;
}
.grid .invisibleEndPlaceholder {
position: absolute;
}
.grid__item {
position: relative;
}
.grid__item::before {
content: '';
display: block;
padding-bottom: 100%;
}
.grid__item .tile,
.grid__item .tile-special,
.grid__item .tile-theme {
height: 100%;
left: 0;
position: absolute;
top: 0;
}
.grid__item--importance-1,
.grid__item--importance-2 {
grid-row-end: span 2;
}
.grid__item--importance-1::before,
.grid__item--importance-2::before {
padding-bottom: 200%;
}
@media screen and (min-width: 520px) {
.grid {
max-width: 699px;
}
}
@media screen and (min-width: 1000px) {
.grid {
max-width: 1179px;
}
}
@media screen and (min-width: 1480px) {
.grid {
max-width: 1659px;
}
}
@media screen and (min-width: 1960px) {
.grid {
max-width: 2139px;
}
}
@media screen and (min-width: 2440px) {
.grid {
max-width: 2619px;
}
}
@media screen and (min-width: 2920px) {
.grid {
max-width: 3099px;
}
}
@media screen and (min-width: 3400px) {
.grid {
max-width: 3579px;
}
}
@media screen and (min-width: 3880px) {
.grid {
max-width: 4059px;
}
}
@media screen and (min-width: 1020px) and (max-width: 1040px) {
.grid {
max-width: 1024px;
}
}
.no-cssgrid .grid {
padding: 0;
max-width: 100%;
}
.no-cssgrid .grid__item {
margin: 10px;
}
@media screen and (min-width: 520px) {
.grid__item::before {
padding-bottom: 100%;
}
.grid__item--importance-1 {
grid-column-end: span 2;
grid-row-end: span 2;
}
.grid__item--direction-h {
grid-column-end: span 2;
grid-row-end: auto;
}
.grid__item--direction-h::before {
padding-bottom: calc(50% - 10px);
}
.grid__item--direction-v {
grid-row-end: span 2;
}
.grid__item--direction-v::before {
padding-bottom: calc(200% + 20px);
}
.no-cssgrid .grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.no-cssgrid .grid__item {
flex: 0 1 250px;
}
.no-cssgrid .grid__item::before {
padding-bottom: 100%;
}
.no-cssgrid .grid__item--importance-1,
.no-cssgrid .grid__item--direction-h,
.no-cssgrid .grid__item--direction-v {
flex: 0 1 500px;
}
.no-cssgrid .grid__item--importance-1::before,
.no-cssgrid .grid__item--direction-h::before,
.no-cssgrid .grid__item--direction-v::before {
padding-bottom: 50%;
}
}
.grid-filter {
margin: 24px 10px 12px;
position: relative;
}
.grid-filter__button {
border: none;
border-radius: 34px;
color: var(--colour-black);
display: inline-block;
font-size: 1rem;
line-height: 1;
margin: 0;
padding: 0.7em 1.3em;
background: transparent;
cursor: pointer;
text-align: left;
}
.grid-filter__button-arrow {
aspect-ratio: 22 / 13;
transition: transform 0.2s ease-in-out;
width: 22px;
will-change: transform;
}
.grid-filter__button--label {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
--shadow-base: 2px;
--border-thickness: var(--shadow-base);
align-items: center;
background: var(--colour-white);
display: flex;
font-size: 1rem;
width: 100%;
}
.grid-filter__button--label .grid-filter__button-text {
background-color: var(--colour-black);
color: var(--colour-white);
font-weight: var(--font-weight-bold);
padding: 0.75em 1.3em;
border-radius: 2em;
}
.grid-filter__button--label .grid-filter__button-label {
padding-right: 8px;
}
.grid-filter__button--label .grid-filter__button-arrow {
margin: 0 0 0 auto;
}
.grid-filter__button--label:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.grid-filter__button--selected {
display: none;
}
.grid-filter__list {
background: var(--colour-white);
border-radius: 0 0 2em 2em;
border: solid 2px var(--colour-black);
border-top: none;
display: none;
left: 0;
position: absolute;
top: calc(100% - 4px);
width: 100%;
z-index: 2;
}
.grid-filter__list ul {
padding-bottom: 8px;
}
.grid-filter__list-item--label {
display: none;
}
.grid-filter--open .grid-filter__button--label {
border-radius: 2em 2em 0 0;
}
.grid-filter--open .grid-filter__button--label:hover, .grid-filter--open .grid-filter__button--label:focus {
transform: translate(0);
}
.grid-filter--open .grid-filter__button-arrow {
transform: rotate(-180deg);
}
.grid-filter--open .grid-filter__list {
display: block;
}
@media only screen and (min-width: 43.063em) {
.grid-filter {
display: flex;
justify-content: center;
margin: 32px auto 40px;
}
.grid-filter__list {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
--shadow-base: 2px;
--border-thickness: var(--shadow-base);
border-radius: 3em;
align-items: center;
padding: 12px 12px 12px 24px;
position: static;
width: auto;
display: flex;
}
.grid-filter__list ul {
align-items: center;
display: flex;
flex-wrap: wrap;
padding-bottom: 0;
}
.grid-filter__list-item {
margin-right: 8px;
}
.grid-filter__list-item--label {
display: block;
margin: 0 8px 0 0;
line-height: 1;
}
.grid-filter__button {
background: none;
border-radius: 2em;
display: block;
padding: 12px 24px;
}
.grid-filter__button:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.grid-filter__button:focus:not(:focus-visible) {
box-shadow: none;
}
.grid-filter__button--unselected:hover {
box-shadow: 0 0 0 2px var(--colour-black);
}
.grid-filter__button--selected {
background-color: var(--colour-black);
color: var(--colour-white);
cursor: default;
position: relative;
}
.grid-filter__button--selected::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='19' aria-hidden='true' %3E%3Cdefs%3E%3Cfilter id='a' width='110.4%25' height='125%25' x='-5.2%25' y='-6.3%25' filterUnits='objectBoundingBox'%3E%3CfeOffset dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeComposite in='shadowOffsetOuter1' in2='SourceAlpha' operator='out' result='shadowOffsetOuter1'/%3E%3CfeColorMatrix in='shadowOffsetOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Cpath id='b' d='m37.807 53.187 6.562 9.843a3.079 3.079 0 0 1-2.561 4.786H28.684a3.079 3.079 0 0 1-2.561-4.786l6.561-9.843a3.079 3.079 0 0 1 5.123 0Z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(-25.5 -51)'%3E%3Cuse xlink:href='%23b' fill='%23000' filter='url("#a#a")'/%3E%3Cpath fill='%23EE0500' stroke='%23000' stroke-linejoin='square' stroke-width='2' d='M34.838 52.857a2.072 2.072 0 0 1 2.137.885l6.562 9.843c.318.477.413 1.039.309 1.56a2.079 2.079 0 0 1-2.038 1.67l-13.124.001a2.072 2.072 0 0 1-1.47-.609 2.079 2.079 0 0 1-.26-2.623l6.562-9.842c.319-.478.8-.781 1.322-.885Z'/%3E%3C/g%3E%3C/svg%3E");
width: 20px;
height: 19px;
position: absolute;
left: calc(50% - 10px);
top: calc(100% + 3px);
}
.grid-filter__button--label {
display: none;
}
.grid-filter--open .grid-filter__list {
display: flex;
}
}
.icon {
background-color: white;
border-radius: 50%;
display: block;
min-width: 64px;
position: relative;
width: 100%;
overflow: hidden;
}
.icon::before {
content: "";
display: block;
padding-bottom: 100%;
}
.icon__wrapper,
.icon__piece,
.icon__piece::before,
.icon__piece::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon__piece,
.icon__piece::before,
.icon__piece::after {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.icon__piece::before,
.icon__piece::after {
content: "";
}
@keyframes icon--play {
45% {
transform: rotate(180deg) scale(0.4);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.icon--play .icon__piece {
background-image: url("../png/icon-play_1.5e3e6a48d1b8933a.png");
}
.icon-hover:hover .icon--play .icon__piece, .icon-hover:focus .icon--play .icon__piece {
animation: icon--play 0.8s cubic-bezier(0.09, 0.42, 0.31, 1.68);
}
@keyframes icon--opinion-polls {
50% {
transform: translateY(35%);
}
50.01% {
transform: translateY(-45%);
}
100% {
transform: translateY(0);
}
}
.icon--opinion-polls .icon__piece--1 {
background-image: url("../png/icon-poll_1.96a4af5f2080933a.png");
}
.icon--opinion-polls .icon__piece--2 {
overflow: hidden;
bottom: 54.545%;
top: auto;
}
.icon--opinion-polls .icon__piece--2::after {
background-image: url("../png/icon-poll_2.d11b9b61f9d1933a.png");
top: 54.545%;
}
.icon-hover:hover .icon--opinion-polls .icon__piece--2::after, .icon-hover:focus .icon--opinion-polls .icon__piece--2::after {
animation: icon--opinion-polls 1s cubic-bezier(0.45, 0.77, 0.01, 0.98);
}
@keyframes icon--skill-quizzes {
0% {
transform: scale(0) rotate(10deg);
}
50% {
transform: scale(1) rotate(10deg);
}
60% {
transform: scale(1) rotate(-4deg);
}
80% {
transform: scale(1) rotate(3deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
.icon--skill-quizzes .icon__piece {
background-image: url("../png/icon-skill-quiz_1.9262ec03e2ac933a.png");
transform-origin: 64.772% 84.09%;
}
.icon-hover:hover .icon--skill-quizzes .icon__piece, .icon-hover:focus .icon--skill-quizzes .icon__piece {
animation: icon--skill-quizzes 0.8s cubic-bezier(0.09, 0.42, 0.31, 1.68);
}
@keyframes icon--personality-quizzes {
50% {
transform: translateY(15%);
}
}
@keyframes icon--personality-quizzes-reverse {
50% {
transform: translateY(-15%);
}
}
.icon--personality-quizzes .icon__piece::before {
background-image: url("../png/icon-p-quiz_1.2adb910d4fe7933a.png");
}
.icon--personality-quizzes .icon__piece::after {
background-image: url("../png/icon-p-quiz_2.bfb740ce2102933a.png");
}
.icon-hover:hover .icon--personality-quizzes .icon__piece::before, .icon-hover:hover .icon--personality-quizzes .icon__piece::after, .icon-hover:focus .icon--personality-quizzes .icon__piece::before, .icon-hover:focus .icon--personality-quizzes .icon__piece::after {
animation: icon--personality-quizzes 1s cubic-bezier(0.53, 0, 0.31, 0.99);
}
.icon-hover:hover .icon--personality-quizzes .icon__piece::after, .icon-hover:focus .icon--personality-quizzes .icon__piece::after {
animation-name: icon--personality-quizzes-reverse;
}
@keyframes icon--puzzles {
50%,
75% {
animation-timing-function: cubic-bezier(0.21, 0.01, 0.31, 0.98);
transform: rotate(38deg);
}
}
@keyframes icon--puzzles-click {
50%,
90% {
transform: scale(1) translate(0, 0);
}
}
.icon--puzzles .icon__piece {
background-image: url("../png/icon-puzzles_1.aba7b194dfc5933a.png");
}
.icon--puzzles .icon__piece::before {
background-image: url("../png/icon-puzzles_2.1fc7898566e0933a.png");
transform-origin: 47.727% 52.272%;
}
.icon--puzzles .icon__piece::after {
background-image: url("../png/icon-puzzles_3.79e182af0e57933a.png");
transform-origin: 76.136% 51.136%;
transform: scale(0) translate(-20%, 20%);
}
.icon-hover:hover .icon--puzzles .icon__piece::before, .icon-hover:focus .icon--puzzles .icon__piece::before {
animation: icon--puzzles 0.8s ease;
}
.icon-hover:hover .icon--puzzles .icon__piece::after, .icon-hover:focus .icon--puzzles .icon__piece::after {
animation: icon--puzzles-click 0.5s 0.3s cubic-bezier(0.1, 0.75, 0.39, 0.98);
}
@keyframes icon--videos {
25% {
transform: scale(0.8) translateX(-15%);
}
50% {
transform: scale(1) translateX(100%);
}
50.01% {
transform: scale(0.8) translateX(-100%);
}
100% {
animation-timing-function: cubic-bezier(0.03, 0.69, 0.33, 1.41);
transform: scale(1) translateX(0);
}
}
.icon--videos .icon__piece {
background-image: url("../png/icon-video_1.16ce8a2e91f7933a.png");
}
.icon-hover:hover .icon--videos .icon__piece, .icon-hover:focus .icon--videos .icon__piece {
animation: icon--videos 1s cubic-bezier(0.68, 0.17, 0.58, 1.02);
}
@keyframes icon--pics {
25%,
75% {
transform: scale(0);
}
}
@keyframes icon--pics-click {
25%,
75% {
transform: scale(1) translate(0, 0);
}
}
.icon--pics .icon__piece {
background-image: url("../png/icon-pic_1.b203940abbbf933a.png");
}
.icon--pics .icon__piece::before {
background-image: url("../png/icon-pic_2.60c515739705933a.png");
transform-origin: 50% 53.409%;
}
.icon--pics .icon__piece::after {
background-image: url("../png/icon-pic_3.b517af4f1cb1933a.png");
transform: scale(0) translate(-20%, 20%);
transform-origin: 76.136% 36.363%;
}
.icon-hover:hover .icon--pics .icon__piece::before, .icon-hover:focus .icon--pics .icon__piece::before {
animation: icon--pics 0.6s ease;
}
.icon-hover:hover .icon--pics .icon__piece::after, .icon-hover:focus .icon--pics .icon__piece::after {
animation: icon--pics-click 0.5s 0.1s cubic-bezier(0.1, 0.75, 0.39, 0.98);
}
@keyframes icon--wallpapers {
30%,
60% {
transform: translateX(0);
}
}
@keyframes icon--wallpapers-paper {
30%,
60% {
transform: scaleX(1);
}
}
.icon--wallpapers .icon__piece--1 {
transform: scaleX(0.8);
overflow: hidden;
width: 54.545%;
left: 22.7275%;
}
.icon--wallpapers .icon__piece--1::after {
background-image: url("../png/icon-wallpaper_1.d0900f10ff21933a.png");
background-size: auto 100%;
transform: scaleX(1.2);
}
.icon--wallpapers .icon__piece--2::before {
background-image: url("../png/icon-wallpaper_2.de391ac220d2933a.png");
transform: translateX(8%);
}
.icon--wallpapers .icon__piece--2::after {
background-image: url("../png/icon-wallpaper_3.d276916ce804933a.png");
transform: translateX(-8%);
}
.icon-hover:hover .icon--wallpapers .icon__piece--1,
.icon-hover:hover .icon--wallpapers .icon__piece--1::after, .icon-hover:focus .icon--wallpapers .icon__piece--1,
.icon-hover:focus .icon--wallpapers .icon__piece--1::after {
animation: icon--wallpapers-paper 1s ease-in-out;
}
.icon-hover:hover .icon--wallpapers .icon__piece--2::before, .icon-hover:hover .icon--wallpapers .icon__piece--2::after, .icon-hover:focus .icon--wallpapers .icon__piece--2::before, .icon-hover:focus .icon--wallpapers .icon__piece--2::after {
animation: icon--wallpapers 1s ease-in-out;
}
@keyframes icon--cards {
50%,
70% {
transform: scale(1.4);
}
100% {
animation-timing-function: cubic-bezier(0.59, -0.7, 0.37, 1.1);
transform: scale(1);
}
}
.icon--cards .icon__piece {
background-image: url("../png/icon-cards_1.0b9df5fdb2ea933a.png");
}
.icon--cards .icon__piece::after {
background-image: url("../png/icon-cards_2.a92f0f6e4b50933a.png");
}
.icon-hover:hover .icon--cards .icon__piece::after, .icon-hover:focus .icon--cards .icon__piece::after {
animation: icon--cards 0.8s cubic-bezier(0.42, 0.1, 0.47, 1.69);
}
@keyframes icon--crafts {
50% {
transform: translateX(100%);
}
50.01% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes icon--crafts-sci {
50% {
transform: rotate(-30deg);
}
}
@keyframes icon--crafts-sci-reverse {
50% {
transform: rotate(30deg);
}
}
@keyframes icon--crafts-line {
50.01% {
transform: scaleX(1);
}
}
.icon--crafts {
-webkit-transform: translateZ(0);
}
.icon--crafts .icon__piece--1 {
overflow: hidden;
}
.icon--crafts .icon__piece--1::before {
background-image: url("../png/icon-crafts_1.113d19759b22933a.png");
}
.icon--crafts .icon__piece--1::after {
background-color: white;
transform: scaleX(0.35);
transform-origin: left center;
}
.icon--crafts .icon__piece--2::before, .icon--crafts .icon__piece--2::after {
transform-origin: 31.818% 50%;
}
.icon--crafts .icon__piece--2::before {
background-image: url("../png/icon-crafts_2.7bad4d1a4bb1933a.png");
}
.icon--crafts .icon__piece--2::after {
background-image: url("../png/icon-crafts_3.c9b690cef0c2933a.png");
}
.icon-hover:hover .icon--crafts .icon__piece--1::after, .icon-hover:focus .icon--crafts .icon__piece--1::after {
animation: icon--crafts-line 1.3s ease-in-out;
}
.icon-hover:hover .icon--crafts .icon__piece--2, .icon-hover:focus .icon--crafts .icon__piece--2 {
animation: icon--crafts 1.5s ease-in-out;
}
.icon-hover:hover .icon--crafts .icon__piece--2::before, .icon-hover:hover .icon--crafts .icon__piece--2::after, .icon-hover:focus .icon--crafts .icon__piece--2::before, .icon-hover:focus .icon--crafts .icon__piece--2::after {
animation: icon--crafts-sci 0.3s linear 5;
}
.icon-hover:hover .icon--crafts .icon__piece--2::before, .icon-hover:focus .icon--crafts .icon__piece--2::before {
animation-name: icon--crafts-sci-reverse;
}
@keyframes icon--print-and-play {
25%,
75% {
transform: translateY(15%);
}
}
.icon--print-and-play .icon__piece::before {
background-image: url("../png/icon-print_2.b1452888cafd933a.png");
}
.icon--print-and-play .icon__piece::after {
background-image: url("../png/icon-print_1.88513aff49b9933a.png");
}
.icon-hover:hover .icon--print-and-play .icon__piece::before, .icon-hover:focus .icon--print-and-play .icon__piece::before {
animation: icon--print-and-play 1s ease-in-out;
}
.icon--arrow-left,
.icon--arrow-right {
overflow: visible;
background-color: transparent;
filter: drop-shadow(0 4px 0 var(--colour-black));
}
.icon--arrow-left .icon__piece,
.icon--arrow-right .icon__piece {
transition: transform 0.2s ease;
}
.icon--arrow-left .icon__piece::after,
.icon--arrow-right .icon__piece::after {
background-image: url("../svg/icon-arrow.9d8b462587db933a.svg");
}
.icon-hover:hover .icon--arrow-left .icon__piece, .icon-hover:focus .icon--arrow-left .icon__piece, .icon-hover:hover
.icon--arrow-right .icon__piece, .icon-hover:focus
.icon--arrow-right .icon__piece {
transform: scale(1.3);
}
.icon--arrow-left .icon__piece::after {
transform: scaleX(-1);
}
@keyframes icon--externallink {
50% {
transform: translate(6.818%, 6.818%);
}
}
.icon--externallink .icon__piece--1 {
background-image: url("../png/icon-links_1.8ca118f968f4933a.png");
}
.icon--externallink .icon__piece--2 {
background-image: url("../png/icon-links_2.7534074f7f13933a.png");
}
.icon--externallink .icon__piece--2::after {
background-image: url("../png/icon-links_3.083a2364ec15933a.png");
}
.icon-hover:hover .icon--externallink .icon__piece--2, .icon-hover:focus .icon--externallink .icon__piece--2 {
animation: icon--externallink 0.8s ease-in-out;
}
.icon-hover:hover .icon--externallink .icon__piece--2::after, .icon-hover:focus .icon--externallink .icon__piece--2::after {
transition: transform 0.8s ease-in-out;
transform-origin: 45.454% 51.136%;
transform: rotate(360deg);
}
@keyframes icon--news {
80% {
-moz-transform: scaleX(0.6);
-ms-transform: scaleX(0.6);
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
}
81% {
-moz-transform: scaleX(0.62) rotate(1deg);
-ms-transform: scaleX(0.62) rotate(1deg);
-webkit-transform: scaleX(0.62) rotate(1deg);
transform: scaleX(0.62) rotate(1deg);
}
82% {
-moz-transform: scaleX(0.64) rotate(0deg);
-ms-transform: scaleX(0.64) rotate(0deg);
-webkit-transform: scaleX(0.64) rotate(0deg);
transform: scaleX(0.64) rotate(0deg);
}
83% {
-moz-transform: scaleX(0.66) rotate(2deg);
-ms-transform: scaleX(0.66) rotate(2deg);
-webkit-transform: scaleX(0.66) rotate(2deg);
transform: scaleX(0.66) rotate(2deg);
}
84% {
-moz-transform: scaleX(0.68) rotate(0deg);
-ms-transform: scaleX(0.68) rotate(0deg);
-webkit-transform: scaleX(0.68) rotate(0deg);
transform: scaleX(0.68) rotate(0deg);
}
85% {
-moz-transform: scaleX(0.7) rotate(-3deg);
-ms-transform: scaleX(0.7) rotate(-3deg);
-webkit-transform: scaleX(0.7) rotate(-3deg);
transform: scaleX(0.7) rotate(-3deg);
}
86% {
-moz-transform: scaleX(0.72) rotate(2deg);
-ms-transform: scaleX(0.72) rotate(2deg);
-webkit-transform: scaleX(0.72) rotate(2deg);
transform: scaleX(0.72) rotate(2deg);
}
87% {
-moz-transform: scaleX(0.74) rotate(-2deg);
-ms-transform: scaleX(0.74) rotate(-2deg);
-webkit-transform: scaleX(0.74) rotate(-2deg);
transform: scaleX(0.74) rotate(-2deg);
}
88% {
-moz-transform: scaleX(0.76) rotate(1deg);
-ms-transform: scaleX(0.76) rotate(1deg);
-webkit-transform: scaleX(0.76) rotate(1deg);
transform: scaleX(0.76) rotate(1deg);
}
89% {
-moz-transform: scaleX(0.78) rotate(-2deg);
-ms-transform: scaleX(0.78) rotate(-2deg);
-webkit-transform: scaleX(0.78) rotate(-2deg);
transform: scaleX(0.78) rotate(-2deg);
}
90% {
-moz-transform: scaleX(0.8) rotate(0deg);
-ms-transform: scaleX(0.8) rotate(0deg);
-webkit-transform: scaleX(0.8) rotate(0deg);
transform: scaleX(0.8) rotate(0deg);
}
91% {
-moz-transform: scaleX(0.82) rotate(3deg);
-ms-transform: scaleX(0.82) rotate(3deg);
-webkit-transform: scaleX(0.82) rotate(3deg);
transform: scaleX(0.82) rotate(3deg);
}
92% {
-moz-transform: scaleX(0.84) rotate(-3deg);
-ms-transform: scaleX(0.84) rotate(-3deg);
-webkit-transform: scaleX(0.84) rotate(-3deg);
transform: scaleX(0.84) rotate(-3deg);
}
93% {
-moz-transform: scaleX(0.86) rotate(-3deg);
-ms-transform: scaleX(0.86) rotate(-3deg);
-webkit-transform: scaleX(0.86) rotate(-3deg);
transform: scaleX(0.86) rotate(-3deg);
}
94% {
-moz-transform: scaleX(0.88) rotate(-2deg);
-ms-transform: scaleX(0.88) rotate(-2deg);
-webkit-transform: scaleX(0.88) rotate(-2deg);
transform: scaleX(0.88) rotate(-2deg);
}
95% {
-moz-transform: scaleX(0.9) rotate(-3deg);
-ms-transform: scaleX(0.9) rotate(-3deg);
-webkit-transform: scaleX(0.9) rotate(-3deg);
transform: scaleX(0.9) rotate(-3deg);
}
96% {
-moz-transform: scaleX(0.92) rotate(1deg);
-ms-transform: scaleX(0.92) rotate(1deg);
-webkit-transform: scaleX(0.92) rotate(1deg);
transform: scaleX(0.92) rotate(1deg);
}
97% {
-moz-transform: scaleX(0.94) rotate(-3deg);
-ms-transform: scaleX(0.94) rotate(-3deg);
-webkit-transform: scaleX(0.94) rotate(-3deg);
transform: scaleX(0.94) rotate(-3deg);
}
98% {
-moz-transform: scaleX(0.96) rotate(1deg);
-ms-transform: scaleX(0.96) rotate(1deg);
-webkit-transform: scaleX(0.96) rotate(1deg);
transform: scaleX(0.96) rotate(1deg);
}
99% {
-moz-transform: scaleX(0.98) rotate(1deg);
-ms-transform: scaleX(0.98) rotate(1deg);
-webkit-transform: scaleX(0.98) rotate(1deg);
transform: scaleX(0.98) rotate(1deg);
}
100% {
-moz-transform: scaleX(1) rotate(0deg);
-ms-transform: scaleX(1) rotate(0deg);
-webkit-transform: scaleX(1) rotate(0deg);
transform: scaleX(1) rotate(0deg);
}
100% {
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes icon--news-sound {
5%,
100% {
opacity: 1;
}
20%,
100% {
transform: translate(0, 0);
}
}
.icon--news .icon__piece::before {
background-image: url("../png/icon-news_1.d794e423fe3e933a.png");
transform-origin: 0 50%;
}
.icon--news .icon__piece::after {
background-image: url("../png/icon-news_2.b47660092d17933a.png");
}
.icon-hover:hover .icon--news .icon__piece::before, .icon-hover:focus .icon--news .icon__piece::before {
animation: icon--news 0.8s linear;
}
.icon-hover:hover .icon--news .icon__piece::after, .icon-hover:focus .icon--news .icon__piece::after {
opacity: 0;
transform: translateX(-10%);
animation: icon--news-sound 1s 0.8s cubic-bezier(0.03, 0.69, 0.33, 1.41) forwards;
}
@keyframes icon--memory-match-click {
15%,
75% {
transform: scale(1);
}
}
@keyframes icon--memory-match-check {
18%,
75% {
opacity: 1;
}
}
.icon--memory-match .icon__piece {
background-image: url("../png/icon-match_1.e81c618432d3933a.png");
}
.icon--memory-match .icon__piece::before {
background-image: url("../png/icon-match_2.824795d87bc2933a.png");
opacity: 0;
}
.icon--memory-match .icon__piece::after {
background-image: url("../png/icon-match_3.1d479c303095933a.png");
transform: scale(0);
}
.icon-hover:hover .icon--memory-match .icon__piece::before, .icon-hover:focus .icon--memory-match .icon__piece::before {
animation: icon--memory-match-check 1s linear;
}
.icon-hover:hover .icon--memory-match .icon__piece::after, .icon-hover:focus .icon--memory-match .icon__piece::after {
animation: icon--memory-match-click 1s 0.1s cubic-bezier(0.1, 0.75, 0.39, 0.98);
}
@keyframes icon--paint-by-numbers {
50%,
75% {
transform: scale(1);
}
}
@keyframes icon--paint-by-numbers-brush {
50%,
75% {
transform: translate(-9%, -8%) rotate(5deg);
}
}
.icon--paint-by-numbers .icon__piece {
background-image: url("../png/icon-paint_2.af8e134fe8e0933a.png");
}
.icon--paint-by-numbers .icon__piece::before {
background-image: url("../png/icon-paint_3.196f21f371ff933a.png");
transform: scale(0);
}
.icon--paint-by-numbers .icon__piece::after {
background-image: url("../png/icon-paint_1.8168f6b31606933a.png");
}
.icon-hover:hover .icon--paint-by-numbers .icon__piece::before, .icon-hover:focus .icon--paint-by-numbers .icon__piece::before {
animation: icon--paint-by-numbers 0.8s ease-in-out;
}
.icon-hover:hover .icon--paint-by-numbers .icon__piece::after, .icon-hover:focus .icon--paint-by-numbers .icon__piece::after {
animation: icon--paint-by-numbers-brush 0.7s 0.1s ease-in-out;
}
@keyframes icon--loading {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(145deg);
}
50% {
transform: rotate(360deg);
}
}
@keyframes icon--loading-colours {
0% {
background-color: #b54bff;
}
20% {
background-color: #fff000;
}
40% {
background-color: #1dd47c;
}
60% {
background-color: #f42f2f;
}
80% {
background-color: #00bff3;
}
100% {
background-color: #b54bff;
}
}
.icon--loading {
background-color: transparent;
border-radius: 0;
animation: icon--loading 2s infinite ease-in-out, icon--loading-colours 3s infinite ease-in-out;
}
.main-nav-wrapper {
background-color: var(--colour-white);
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
}
.main-nav {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.main-nav a {
text-decoration: none;
}
.main-nav__label {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
appearance: none;
border: none;
background: transparent;
cursor: pointer;
padding: 19px 0;
height: 100%;
font-size: 1.25rem;
width: 96px;
text-align: center;
}
.main-nav__label[aria-expanded="true"] {
background-color: var(--colour-surface);
}
.main-nav__search {
width: 96px;
min-height: 100%;
}
.main-nav__logo {
-webkit-animation: tadadelay 10s 1s;
-moz-animation: tadadelay 10s 1s;
-o-animation: tadadelay 10s 1s;
animation: tadadelay 10s 1s;
margin: 0 auto;
align-self: center;
width: 100px;
display: block;
}
.main-nav__logo img {
width: 100%;
display: block;
}
.main-nav__logo:hover, .main-nav__logo:focus {
-webkit-animation: tada 1s;
-moz-animation: tada 1s;
-o-animation: tada 1s;
animation: tada 1s;
}
.main-nav__list {
-moz-perspective: 600px;
-webkit-perspective: 600px;
perspective: 600px;
position: absolute;
left: -100%;
top: 100%;
width: 100%;
}
.main-nav__list[aria-hidden="false"] {
left: 0;
}
.main-nav__list[aria-hidden="false"] .main-nav__item {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(1) {
-moz-transition-delay: 0s, 0s;
-o-transition-delay: 0s, 0s;
-webkit-transition-delay: 0s, 0s;
transition-delay: 0s, 0s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(2) {
-moz-transition-delay: 0.15s, 0.15s;
-o-transition-delay: 0.15s, 0.15s;
-webkit-transition-delay: 0.15s, 0.15s;
transition-delay: 0.15s, 0.15s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(3) {
-moz-transition-delay: 0.3s, 0.3s;
-o-transition-delay: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0.3s;
transition-delay: 0.3s, 0.3s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(4) {
-moz-transition-delay: 0.45s, 0.45s;
-o-transition-delay: 0.45s, 0.45s;
-webkit-transition-delay: 0.45s, 0.45s;
transition-delay: 0.45s, 0.45s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(5) {
-moz-transition-delay: 0.6s, 0.6s;
-o-transition-delay: 0.6s, 0.6s;
-webkit-transition-delay: 0.6s, 0.6s;
transition-delay: 0.6s, 0.6s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(6) {
-moz-transition-delay: 0.75s, 0.75s;
-o-transition-delay: 0.75s, 0.75s;
-webkit-transition-delay: 0.75s, 0.75s;
transition-delay: 0.75s, 0.75s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(7) {
-moz-transition-delay: 0.9s, 0.9s;
-o-transition-delay: 0.9s, 0.9s;
-webkit-transition-delay: 0.9s, 0.9s;
transition-delay: 0.9s, 0.9s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(8) {
-moz-transition-delay: 1.05s, 1.05s;
-o-transition-delay: 1.05s, 1.05s;
-webkit-transition-delay: 1.05s, 1.05s;
transition-delay: 1.05s, 1.05s;
}
.main-nav__list[aria-hidden="false"] .main-nav__item:nth-child(9) {
-moz-transition-delay: 1.2s, 1.2s;
-o-transition-delay: 1.2s, 1.2s;
-webkit-transition-delay: 1.2s, 1.2s;
transition-delay: 1.2s, 1.2s;
}
.main-nav__item {
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;
transform-origin: center top;
-moz-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-moz-transition: opacity 0.1s, -moz-transform 1s cubic-bezier(0.42, 2, 0.53, 1);
-o-transition: opacity 0.1s, -o-transform 1s cubic-bezier(0.42, 2, 0.53, 1);
-webkit-transition: opacity 0.1s, -webkit-transform 1s cubic-bezier(0.42, 2, 0.53, 1);
transition: opacity 0.1s, transform 1s cubic-bezier(0.42, 2, 0.53, 1);
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
background-color: var(--colour-surface);
border-bottom: 1px solid rgba(182, 182, 182, 0.5);
display: block;
font-size: 1.125rem;
font-weight: var(--font-weight-normal);
width: 100%;
opacity: 0;
}
.main-nav__item:nth-child(1) {
-moz-transition-delay: 0.25s, 0.25s;
-o-transition-delay: 0.25s, 0.25s;
-webkit-transition-delay: 0.25s, 0.25s;
transition-delay: 0.25s, 0.25s;
z-index: 5;
}
.main-nav__item:nth-child(2) {
-moz-transition-delay: 0.2s, 0.2s;
-o-transition-delay: 0.2s, 0.2s;
-webkit-transition-delay: 0.2s, 0.2s;
transition-delay: 0.2s, 0.2s;
z-index: 4;
}
.main-nav__item:nth-child(3) {
-moz-transition-delay: 0.15s, 0.15s;
-o-transition-delay: 0.15s, 0.15s;
-webkit-transition-delay: 0.15s, 0.15s;
transition-delay: 0.15s, 0.15s;
z-index: 3;
}
.main-nav__item:nth-child(4) {
-moz-transition-delay: 0.1s, 0.1s;
-o-transition-delay: 0.1s, 0.1s;
-webkit-transition-delay: 0.1s, 0.1s;
transition-delay: 0.1s, 0.1s;
z-index: 2;
}
.main-nav__item:nth-child(5) {
-moz-transition-delay: 0.05s, 0.05s;
-o-transition-delay: 0.05s, 0.05s;
-webkit-transition-delay: 0.05s, 0.05s;
transition-delay: 0.05s, 0.05s;
z-index: 1;
}
.main-nav__item:nth-child(6) {
-moz-transition-delay: 0s, 0s;
-o-transition-delay: 0s, 0s;
-webkit-transition-delay: 0s, 0s;
transition-delay: 0s, 0s;
z-index: 0;
}
.main-nav__item a {
display: block;
padding: 19px 22px;
}
.main-nav__item:first-child {
border-top: solid 3px rgba(0, 0, 0, 0.3);
}
.main-nav__item--parent {
background: #b6b6b6;
}
.main-nav__parents {
display: none;
}
@media only screen and (min-width: 77.063em) {
.main-nav {
align-items: stretch;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
padding-inline: 10px;
}
.main-nav__logo {
padding-right: 40px;
width: 170px;
}
.main-nav__label {
display: none;
}
.main-nav__list {
position: static;
width: auto;
display: flex;
flex: 1;
justify-content: center;
}
.main-nav__item {
background: transparent;
border: none;
font-size: 1rem;
opacity: 1;
transform: none;
padding-top: 0;
padding-bottom: 0;
width: auto;
}
.main-nav__item a {
display: inline-flex;
height: 100%;
align-items: center;
}
.main-nav__item a:hover, .main-nav__item a:focus {
background-color: var(--colour-surface);
}
.main-nav__item:first-child {
border-top: none;
}
.main-nav__item.is-active a span {
position: relative;
}
.main-nav__item.is-active a span::after {
background-image: url("../png/active-underline.421344365594933a.png");
background-image: image-set(url("../png/active-underline.421344365594933a.png") 1x, url("../png/active-underline-2x.431cbdfc5e6c933a.png") 2x);
bottom: -12px;
content: "";
background-size: 100% 100%;
background-repeat: no-repeat;
height: 8px;
left: -12px;
position: absolute;
width: calc(100% + 24px);
}
.main-nav__item--parent {
display: none;
}
.main-nav__parents {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
color: var(--colour-grey);
text-shadow: none;
border-left: 2px solid rgba(0, 0, 0, 0.2);
display: inline-flex;
align-items: center;
padding: 20px;
font-size: 1rem;
}
.main-nav__parents:hover, .main-nav__parents:focus {
background-color: var(--colour-surface);
}
.main-nav__search {
width: auto;
}
.main-nav__item {
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
}
}
/* prettier-ignore */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
.page {
flex: 1 0 auto;
padding-top: 112px;
}
.page .container {
padding-left: 10px;
padding-right: 10px;
}
.page-header {
padding: 0 10px;
}
.page-title {
text-align: center;
margin: 0.7em 0;
}
@media only screen and (min-width: 769px) {
.page {
padding-top: 123px;
}
}
@media only screen and (min-width: 77.063em) {
.page {
padding-top: 151px;
}
}
.page-nav {
background-color: var(--colour-surface);
}
.page-nav__list {
padding: 16px 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.page-nav__item {
padding: 16px;
width: 118px;
}
.page-nav__item:not(.page-nav__item--active):hover .page-nav__icon, .page-nav__item:not(.page-nav__item--active):focus-visible .page-nav__icon {
transform: translateY(-4px);
}
.page-nav__item:not(.page-nav__item--active):hover .page-nav__icon {
box-shadow: 0 8px 0 0 var(--colour-black);
}
.page-nav__item:not(.page-nav__item--active):active .page-nav__icon {
transform: translateY(4px);
box-shadow: 0 0 0 0 var(--colour-black);
}
.page-nav__item--active {
background-color: var(--colour-black);
border-radius: 8px;
}
.page-nav__item--active .page-nav__label {
color: var(--colour-white);
}
.page-nav__link {
display: block;
text-decoration: none;
text-align: center;
}
.page-nav__icon {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
--border-thickness: 2px;
--shadow-base: 4px;
border-radius: 50%;
position: relative;
transition: transform 0.1s ease-in;
transition-property: box-shadow, transform;
}
.page-nav__icon::before {
content: '';
display: block;
padding-bottom: 100%;
}
.page-nav__icon .icon {
position: absolute;
top: 0;
left: 0;
}
.page-nav__label {
margin-top: 12px;
display: block;
}
.page-header {
padding: 25px 0 8px;
margin: 0 0 20px;
position: relative;
transition: background-color 0.5s 0.5s ease, color 1s 0.5s linear;
will-change: background-color, color;
}
.page-header.dark {
background: var(--colour-lightgrey);
color: var(--colour-black);
}
.page-header.dark .page-header__desc strong {
color: black;
}
.page-header.dark .page-header__desc a {
color: inherit;
}
.page-header.light {
background: var(--colour-grey);
color: var(--colour-white);
}
.page-header.light .page-header__desc a {
color: inherit;
}
.page-header__wrapper {
max-width: 1180px;
margin: 0 auto;
padding: 0 10px;
}
.page-header__title {
color: inherit;
margin: 0;
}
.page-header__desc {
margin-top: 10px;
}
.page-header__desc a {
color: inherit;
}
.page-header__desc p {
margin: 0 0 1em 0;
color: inherit;
}
.page-header__desc p:last-child {
margin-bottom: 0;
}
.page-header__icon {
display: flex;
align-items: center;
padding-top: 8px;
position: relative;
text-decoration: none;
font-weight: var(--font-weight-bold);
color: inherit;
margin-top: 25px;
}
.page-header__icon::before {
border-top: solid 2px rgba(0, 0, 0, 0.3);
content: "";
display: block;
left: -10px;
position: absolute;
top: 0;
width: calc(100% + 20px);
}
.page-header__icon span {
display: block;
margin-left: 10px;
}
.page-header__icon .icon {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
--border-thickness: 2px;
--shadow-base: calc(var(--border-thickness) * 2);
border-radius: 50%;
width: 64px;
}
@media only screen and (min-width: 43.063em) {
.page-header {
padding-top: 0;
padding-bottom: 0;
}
.page-header__wrapper {
display: flex;
}
.page-header__content,
.page-header__icon {
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.page-header__content {
flex: 1;
padding: 24px 24px 24px 0;
}
.page-header__icon {
align-items: center;
text-align: center;
border-left: solid 2px rgba(0, 0, 0, 0.3);
border-top: none;
padding: 20px 10px;
left: 0;
padding: 16px 0 16px 16px;
width: 20%;
max-width: 160px;
margin-top: 0;
}
.page-header__icon::before {
display: none;
}
.page-header__icon span {
max-width: 100%;
margin-left: 0;
margin-top: 8px;
}
.page-header__icon .icon {
width: 72px;
height: 72px;
}
}
@media only screen and (min-width: 77.063em) {
.page-header__icon .icon {
width: 88px;
height: 88px;
}
}
.page--home .section {
margin-bottom: 39px;
}
.page--home .section:last-child {
margin-bottom: 0;
}
.page--home .section__title {
text-align: center;
margin: 0 0 0.75em;
padding: 0 1rem;
}
.page--home .section--characters .grid__item:nth-last-child(-n + 3) {
display: none;
}
.page--home .section--characters .grid__item:last-child {
display: block;
}
@media screen and (max-width: 520px) {
.page--home .section--characters .grid {
display: flex;
flex-wrap: wrap;
padding: 0;
max-width: 100%;
}
.page--home .section--characters .grid__item {
width: calc(50% - 5px);
margin: 10px 0;
max-width: 250px;
}
}
.page--home .more-characters .tile-theme__img {
background-image: url("../png/btn-see-more-characters.9da99ad65423933a.png");
background-image: image-set(url("../png/btn-see-more-characters.9da99ad65423933a.png") 1x, url("../png/btn-see-more-characters-2x.baa268547086933a.png") 2x);
background-image: image-set(url("../png/btn-see-more-characters.9da99ad65423933a.png") 1x, url("../png/btn-see-more-characters-2x.baa268547086933a.png") 2x);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 0;
border: none;
box-shadow: none;
overflow: visible;
transition: transform 0.1s ease-in-out;
}
.page--home .more-characters .tile-theme__img::after {
display: none;
}
.page--home .more-characters .tile-theme__img::before {
opacity: 0;
}
.page--home .more-characters .tile-theme:hover .tile-theme__img, .page--home .more-characters .tile-theme:focus .tile-theme__img {
background-position: center;
transform: translateZ(0) scale(1.1);
}
.page--home .section--categories {
background-image: radial-gradient(circle at 50% 50%, #fff000 0%, #ffdc00 71%);
position: relative;
padding: 42px 0 56px;
}
.page--home .section--categories .section__title {
margin-bottom: 42px;
}
.page--home .section--categories .swiper {
--column-size: 305px;
max-width: 1570px;
margin: 0 auto;
}
.page--home .section--categories .swiper__nav {
z-index: 2;
width: 79px;
}
.page--home .section--categories .swiper__item {
padding: 40px 10px 0;
}
.page--home .section--categories .doodle {
top: -35px;
left: -50px;
width: 120px;
}
.page--home .section--categories :nth-child(2 of .doodle) {
bottom: -12px;
top: auto;
left: auto;
right: 25px;
width: 35px;
}
.page--home .categories-card {
--icon-size: 85px;
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
display: block;
text-align: center;
color: white;
background-color: var(--colour-midgrey);
height: 100%;
padding: 0 10px 45px;
text-decoration: none;
}
.page--home .categories-card:hover, .page--home .categories-card:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.page--home .categories-card:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.page--home .categories-card:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.page--home .categories-card:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.page--home .categories-card__wrapper {
margin-top: calc((var(--icon-size) + 4px) / 2 * -1);
}
.page--home .categories-card__desc {
margin-bottom: 0;
}
.page--home .categories-card--blue {
background-color: var(--colour-blue);
color: var(--colour-black);
}
.page--home .categories-card--green {
background-color: var(--colour-green);
color: var(--colour-black);
}
.page--home .categories-card--red {
background-color: var(--colour-red);
}
.page--home .categories-card--purple {
background-color: var(--colour-purple);
}
.page--home .categories-card__icon {
width: var(--icon-size);
margin: 0 auto 10px;
}
.page--home .categories-card__name {
display: block;
margin-bottom: 8px;
}
.page--home .section--list {
margin-top: 39px;
}
.page--home .section--list .grid__item--importance-1 {
grid-column-end: auto;
grid-row-end: span 2;
}
.page--home .section--list .grid__item--importance-1::before {
padding-bottom: calc(200% + 20px);
}
.page--home .section--list .tile--importance-featured {
flex-direction: column;
}
.page--home .section--list .tile--importance-featured .tile__img {
position: static;
width: 100%;
flex-basis: 50%;
}
.page--home .section--list .tile--importance-featured .tile__img--main {
display: none;
}
.page--home .section--list .tile--importance-featured .tile__img--profile {
display: block;
}
.page--home .section--list .tile--importance-featured .tile__content {
padding: 2.5em 1em 1em;
}
.page--home .section--list .tile--importance-featured .tile__content {
align-items: center;
justify-content: center;
text-align: center;
}
.page--home .section--list .tile--importance-featured .tile__icon {
background-color: inherit;
border-radius: 50%;
height: 5em;
margin-top: 0;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 5em;
}
@media screen and (min-width: 520px) and (max-width: 1480px) {
.page--home .section--top-three .grid__item:nth-child(n + 2) {
grid-column-end: span 2;
grid-row-end: auto;
}
.page--home .section--top-three .grid__item:nth-child(n + 2)::before {
padding-bottom: calc(50% - 10px);
}
.page--home .section--top-three .grid__item:nth-child(n + 2) .tile {
flex-direction: row;
align-items: center;
}
.page--home .section--top-three .grid__item:nth-child(n + 2) .tile__img--main {
display: none;
}
.page--home .section--top-three .grid__item:nth-child(n + 2) .tile__img--profile {
display: block;
position: static;
}
.page--home .section--top-three .grid__item:nth-child(n + 2) .tile__content {
padding-left: 3em;
align-items: flex-end;
text-align: right;
}
.page--home .section--top-three .grid__item:nth-child(n + 2) .tile__icon {
position: absolute;
border-radius: 50%;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: inherit;
}
}
@media screen and (min-width: 1480px) {
.page--home .section--top-three .grid {
max-width: 1659px;
}
.page--home .section--characters .grid__item:nth-last-child(-n + 3) {
display: block;
}
}
@media only screen and (min-width: 43.063em) {
.page--home .section--categories {
padding: 67px 0 80px;
}
.page--home .section--categories .doodle {
width: 173px;
}
.page--home .section--categories :nth-child(2 of .doodle) {
width: 50px;
}
.page--home .section--characters {
margin-bottom: 80px;
}
}
@media screen and (min-width: 1960px) {
.page--home .section--characters .grid {
display: flex;
align-items: center;
padding-left: 0;
padding-right: 0;
}
.page--home .section--characters .grid__item {
margin: 10px;
max-width: 250px;
flex: 1;
}
}
@media only screen and (min-width: 77.063em) {
.page--home .section--categories .swiper {
--column-size: 368px;
}
.page--home .section--categories .doodle {
top: -15px;
left: calc(50% - 670px);
}
.page--home .section--categories :nth-child(2 of .doodle) {
left: calc(50% + 528px);
right: auto;
}
}
.no-cssgrid .page--home .section--list .grid__item--importance-1::before {
padding-bottom: 50%;
}
.no-cssgrid .page--home .section--list .tile--importance-featured {
flex-direction: row-reverse;
}
.no-cssgrid .page--home .section--list .tile--importance-featured .tile__content {
padding: 1em 3em 1em 1em;
}
.page--news-tips .section {
max-width: 1179px;
margin: 0 auto 10px;
}
.page--news-tips .section--categories,
.page--news-tips .section--body {
padding: 0 10px;
}
.page--news-tips .section--categories {
margin-top: 10px;
margin-bottom: 10px;
}
.page--news-tips .section--categories .mobile-nav {
background: #5C5C5C;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.4);
display: block;
padding: 10px;
}
.page--news-tips .section--categories .mobile-nav select {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
-webkit-appearance: none;
appearance: none;
background: none;
background-size: auto 100%;
border: none;
border-radius: 0;
color: #FFF;
display: block;
font-size: 20px;
}
.page--news-tips .section--categories .mobile-nav select option {
border-radius: 0;
}
.page--news-tips .section--title {
display: none;
}
@media only screen and (min-width: 60em) {
.page--news-tips .section--categories {
display: none;
}
.page--news-tips .section--title {
display: block;
padding: 0 10px;
margin-bottom: 20px;
}
.page--news-tips .section--title .h2 {
background: var(--colour-surface);
padding: 18px 10px 22px;
text-align: center;
margin: 0;
}
}
.page--search-results .page-title strong {
background-color: var(--colour-grey);
color: white;
padding: 0 0.2em;
}
.page--search-results .page-header {
padding: 1px 10px;
}
.tile, .tile-theme, .tile-special {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
color: var(--colour-black);
font-size: 1rem;
text-decoration: none;
}
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.tile, .tile-theme, .tile-special {
-webkit-transform: translate3d(0, 0, 0);
}
}
}
#embedtarget {
margin: 0 auto;
}
#embedtarget > canvas {
display: block;
margin: 0 auto;
}
.page--activity {
--colour-correct: #1DDB81;
--colour-incorrect: #EE0500;
--colour-white: #fff;
--colour-black: #000;
--colour-selected: #FFF000;
}
.page--activity .question .ng-enter {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.page--activity .question-title {
text-align: center;
padding: 24px 0;
margin: 0;
float: left;
width: 100%;
}
.page--activity .question-title.hidden {
display: none;
}
.page--activity .img-wrapper {
position: relative;
}
.page--activity .img-wrapper .img {
position: relative;
}
.page--activity .img-wrapper .img img {
display: block;
width: 100%;
}
.page--activity .img-wrapper .img.has-video > img {
display: none;
}
.page--activity .img-wrapper .img.has-video > .video {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.page--activity .img-wrapper .img.has-video .video-container {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
.page--activity .img-wrapper .img.has-video .video-container .video {
height: 100%;
width: 100%;
}
.page--activity .activity-wrapper {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
background-color: var(--colour-surface);
position: relative;
padding: 20px;
z-index: 3;
}
.page--activity .activity-wrapper:focus {
outline: none;
box-shadow: none;
}
.page--activity .activity-wrapper.video > .video {
height: 0;
margin-bottom: 30px;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.page--activity .activity-wrapper.video > .video iframe,
.page--activity .activity-wrapper.video > .video .OVPlayer {
height: 100%;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
.page--activity .question {
padding: 0;
border: none;
margin: 0;
}
.page--activity .answers {
text-align: center;
clear: both;
}
.page--activity .answers:not(.answered) .answer-wrapper:hover, .page--activity .answers:not(.answered) .answer-wrapper.selected, .page--activity .answers:not(.answered) .answer-wrapper:focus {
box-shadow: inset 0px 0px 0px 10px var(--colour-selected), 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
z-index: 2;
}
.page--activity .answers:not(.answered) .answer-wrapper:hover .action, .page--activity .answers:not(.answered) .answer-wrapper.selected .action, .page--activity .answers:not(.answered) .answer-wrapper:focus .action {
display: block;
box-shadow: inherit;
}
.page--activity .answers:not(.answered) .answer-wrapper:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.page--activity .answers:not(.answered) .answer-wrapper:focus .button {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.page--activity .answers:not(.answered) .answer-wrapper:focus:not(:focus-visible) {
box-shadow: none;
}
.page--activity .answers:not(.answered) .answer-wrapper:focus:not(:focus-visible) .button {
box-shadow: none;
}
.page--activity .answers.answered .answer-wrapper {
pointer-events: none;
}
.page--activity .answers.answered .answer-wrapper.selected {
background-color: var(--colour-selected);
color: var(--colour-black);
}
.page--activity .answers.answered .answer-wrapper.selected::before {
background-image: url('data:image/svg+xml,');
content: '';
width: 10px;
height: 8px;
position: absolute;
left: calc(50% - 5px);
bottom: 2px;
}
.page--activity .answers.answered .answer-wrapper.selected .action {
display: none;
}
.page--activity .answers.answered .answer-wrapper.selected_incorrect {
background-color: var(--colour-incorrect);
color: var(--colour-black);
}
.page--activity .answers.answered .answer-wrapper.selected_correct {
background-color: var(--colour-correct);
color: var(--colour-black);
}
.page--activity .answers__item {
margin-bottom: 0.5em;
}
.page--activity .answer-wrapper {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
--colour-black: #000;
background: #fff;
box-shadow: inset 0px 0px 0px 0px var(--colour-selected), 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
padding: 10px;
position: relative;
width: 100%;
}
.page--activity .answer-wrapper:hover, .page--activity .answer-wrapper:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.page--activity .answer-wrapper:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.page--activity .answer-wrapper:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.page--activity .answer-wrapper:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.page--activity .answer-wrapper .label {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
cursor: pointer;
display: block;
}
.page--activity .answer-wrapper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.page--activity .answer-wrapper .img {
background: #fff;
}
.page--activity .answer-wrapper .img img {
display: block;
margin: 0 auto;
}
.page--activity .answer-wrapper .action {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--colour-selected);
}
.page--activity .answer-wrapper .button {
padding: 13px;
margin: 0 10px 10px;
background: white;
border-color: var(--colour-selected);
}
.page--activity .answer-wrapper .answer {
font-weight: normal;
margin: 0;
padding: 10px;
width: 100%;
display: block;
}
.page--activity .answer-wrapper.selected .answer, .page--activity .answer-wrapper.selected_incorrect .answer, .page--activity .answer-wrapper.selected_correct .answer {
font-weight: var(--font-weight-bold);
}
.page--activity .answer-wrapper.selected_incorrect {
background-color: var(--colour-incorrect);
color: var(--colour-white);
}
.page--activity .answer-wrapper.selected_correct {
background-color: var(--colour-correct);
}
.page--activity .response {
text-align: center;
margin: 20px 0 3px;
}
.page--activity .response .button {
margin: 0;
}
.page--activity .content-footer {
margin-top: 1em;
}
.page--activity .content-footer .content-area p:first-child {
margin-top: 0;
}
.page--activity .preloader {
width: 40px;
min-width: 0;
margin: 0 auto;
}
.page--activity .preloader .icon {
width: 40px;
min-width: 0;
margin: 0 auto;
}
.page--activity .preloader.ng-leave {
-moz-transition: -moz-transform 0.4s ease-out, height 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out, height 0.4s ease-out;
-webkit-transition: -webkit-transform 0.4s ease-out, height 0.4s ease-out;
transition: transform 0.4s ease-out, height 0.4s ease-out;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.page--activity .preloader.ng-leave.ng-leave-active {
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
height: 1px;
}
.page-activity__body {
margin-bottom: 20px;
margin-top: 20px;
}
.page-activity__content .content-area {
margin-top: 24px;
}
@media only screen and (min-width: 60em) {
.page--activity .container.closed {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
overflow: hidden;
}
.page--activity .container.open {
-moz-transition: -moz-transform 0.6s cubic-bezier(0.63, 1.92, 0.12, 0.31);
-o-transition: -o-transform 0.6s cubic-bezier(0.63, 1.92, 0.12, 0.31);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.63, 1.92, 0.12, 0.31);
transition: transform 0.6s cubic-bezier(0.63, 1.92, 0.12, 0.31);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@media only screen and (min-width: 43.063em) {
.page--activity .content-area .small-only {
display: none;
}
.page--activity .content-area .medium-up {
display: block;
}
.page--activity .activity-body {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 91.66667%;
width: 91.66667%;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
}
.page--activity .question.image .answers .answer-wrapper .label {
-ms-flex-direction: column;
flex-direction: column;
}
.page--activity .question.image .answers .answer-wrapper .answer {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.page--activity .question.text .answers .answer-wrapper .label {
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
}
.page--activity .answers {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% + 20px);
margin-left: -10px;
}
.page--activity .answers__item {
width: calc(33.333% - 20px);
margin-left: 10px;
margin-right: 10px;
}
.page--activity .answer-wrapper {
min-height: 100%;
}
.page--activity .answer-wrapper .label {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
}
.page--activity .answer-wrapper .answer {
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
}
}
@media only screen and (min-width: 43.063em) and (-ms-high-contrast: none) {
.page--activity .answer-wrapper {
display: block;
min-height: auto;
}
.page--activity .answer-wrapper .label {
display: block;
}
}
@media only screen and (min-width: 43.063em) and (max-width: 77em) {
.page--activity .content-area .medium-only {
display: block;
}
}
@media only screen and (min-width: 77.063em) {
.page--activity .content-area .large-up {
display: block;
}
.page--activity .answers__item {
width: calc(25% - 20px);
}
}
@media only screen and (min-width: 77.063em) and (max-width: 100em) {
.page--activity .content-area .large-only {
display: block;
}
}
@media only screen and (min-width: 100.063em) {
.page--activity .content-area .xlarge-up {
display: block;
}
}
@media only screen and (min-width: 100.063em) and (max-width: 140em) {
.page--activity .content-area .xlarge-only {
display: block;
}
}
.page--activity-quiz .activity-body {
opacity: 0;
max-height: 1px;
}
.page--activity-quiz .activity-body.loaded {
opacity: 1;
max-height: 5000px;
}
.page--activity-quiz .activity-body.loaded-add {
-moz-transition-timing-function: ease-out, ease-out;
-o-transition-timing-function: ease-out, ease-out;
-webkit-transition-timing-function: ease-out, ease-out;
transition-timing-function: ease-out, ease-out;
-moz-transition-duration: 1s, 1s;
-o-transition-duration: 1s, 1s;
-webkit-transition-duration: 1s, 1s;
transition-duration: 1s, 1s;
-moz-transition-property: max-height, opacity;
-o-transition-property: max-height, opacity;
-webkit-transition-property: max-height, opacity;
transition-property: max-height, opacity;
max-height: 1px;
opacity: 0;
overflow: hidden;
}
.page--activity-quiz .activity-body.loaded-add.loaded-add-active {
opacity: 1;
max-height: 1000px;
}
.page--activity-quiz .video iframe,
.page--activity-quiz .video .OVPlayer {
height: 100%;
}
.page--activity-quiz .result {
text-align: center;
}
.page--activity-quiz .result .img {
background: #fff;
text-align: center;
}
.page--activity-quiz .result .img:focus {
box-shadow: none;
}
.page--activity-quiz .result .img.has-video > img {
display: none;
}
.page--activity-quiz .result .img.has-video > .video {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.page--activity-quiz .result .img.has-video .video-container {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
.page--activity-quiz .result .img.has-video .video-container .video {
height: 100%;
width: 100%;
}
.page--activity-quiz .result .result {
margin: 24px 0 10px;
}
.page--activity-quiz .result .result h2 {
text-align: center;
margin: 0;
}
.page--activity-quiz .result .result p {
margin: 0;
}
.page--activity-quiz .result .action {
text-align: center;
margin: 20px 0 0 3px;
}
.page--activity-quiz .result .action .button {
margin: 10px 10px 0;
}
.page--activity-quiz .result .action .fbshare {
display: none;
}
.page--activity-quiz .progress {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
position: absolute;
right: 10px;
bottom: 10px;
padding: 5px 12px 4px;
text-align: center;
background: #fff;
border-radius: 2em;
font-size: 1em;
margin: 0;
z-index: 1;
}
.page--activity-quiz .progress span {
padding: 0 3px;
}
.page--activity-quiz .progress:focus {
box-shadow: none;
}
.page--activity-quiz .response {
padding: 20px;
color: white;
margin-bottom: 0;
}
.page--activity-quiz .response .focusable:focus {
box-shadow: none;
}
.page--activity-quiz .response.correct {
background: var(--colour-correct);
color: var(--colour-black);
}
.page--activity-quiz .response.correct .response__title::before {
background-image: url("../svg/quiz-right-answer-face.e56219539d3a933a.svg");
}
.page--activity-quiz .response.incorrect {
background: var(--colour-incorrect);
}
.page--activity-quiz .response.incorrect .response__title::before {
background-image: url("../svg/quiz-wrong-answer-face.7db70fc83356933a.svg");
}
.page--activity-quiz .response__title {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.page--activity-quiz .response__title::before {
background: no-repeat center center;
background-size: contain;
content: " ";
display: inline-block;
margin: 0 12px 0 0;
height: 40px;
width: 40px;
}
@media only screen and (min-width: 43.063em) {
.page--activity-quiz .response {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
}
.page--activity-quiz .response div:first-child {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: left;
margin: 0 20px 0 0;
}
.page--activity-quiz .response div:last-child {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.page--activity-quiz .response__title {
font-size: 24px;
justify-content: flex-start;
}
.page--activity-quiz .response__title::before {
width: 48px;
height: 48px;
}
.page--activity-quiz .page-activity__content .content-area {
width: 100%;
}
}
.page--activity-poll .activity-body {
opacity: 0;
max-height: 1px;
}
.page--activity-poll .activity-body.loaded {
opacity: 1;
max-height: 5000px;
}
.page--activity-poll .activity-body.loaded-add {
-moz-transition-timing-function: ease-out, ease-out;
-o-transition-timing-function: ease-out, ease-out;
-webkit-transition-timing-function: ease-out, ease-out;
transition-timing-function: ease-out, ease-out;
-moz-transition-duration: 1s, 1s;
-o-transition-duration: 1s, 1s;
-webkit-transition-duration: 1s, 1s;
transition-duration: 1s, 1s;
-moz-transition-property: max-height, opacity;
-o-transition-property: max-height, opacity;
-webkit-transition-property: max-height, opacity;
transition-property: max-height, opacity;
max-height: 1px;
opacity: 0;
overflow: hidden;
}
.page--activity-poll .activity-body.loaded-add.loaded-add-active {
opacity: 1;
max-height: 1000px;
}
.page--activity-poll .answers.answered .bar {
-moz-transition: width 2s cubic-bezier(0, 1.15, 0.8, 0.31);
-o-transition: width 2s cubic-bezier(0, 1.15, 0.8, 0.31);
-webkit-transition: width 2s cubic-bezier(0, 1.15, 0.8, 0.31);
transition: width 2s cubic-bezier(0, 1.15, 0.8, 0.31);
}
.page--activity-poll .result {
background: var(--colour-white);
height: 2rem;
line-height: 1.5em;
margin: 15px 0 0 0;
position: relative;
}
.page--activity-poll .result .bar {
height: 100%;
width: 0px;
}
.page--activity-poll .result .bar::after {
background: var(--colour-correct) url("../png/poll-answer-result-overlay.8dc91c69d8af933a.png");
content: ' ';
display: block;
height: 100%;
width: 100%;
}
.page--activity-poll .result .bar.play-added::after {
-moz-transition: width 2s cubic-bezier(0.42, 0.8, 0.69, 0.27);
-o-transition: width 2s cubic-bezier(0.42, 0.8, 0.69, 0.27);
-webkit-transition: width 2s cubic-bezier(0.42, 0.8, 0.69, 0.27);
transition: width 2s cubic-bezier(0.42, 0.8, 0.69, 0.27);
width: 0%;
}
.page--activity-poll .result .bar.play-added.play-added-active::after {
width: 100%;
}
.page--activity-poll .result span {
background: var(--colour-white);
font-size: 0.75rem;
position: absolute;
right: 5px;
top: 0.5rem;
line-height: 1.4;
padding: 0 0.3em;
}
@media only screen and (min-width: 43.063em) {
.page--activity-poll .answers li {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.page--activity-poll .answers .answer-wrapper {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
}
.page--activity-poll .page-activity__content .content-area {
width: 100%;
}
}
.page--activity-video .page-activity__body .video {
height: 0;
margin-bottom: 30px;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.page--activity-video .page-activity__body .video iframe,
.page--activity-video .page-activity__body .video .OVPlayer {
height: 100%;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
.page--activity-download .download__image img {
height: auto;
display: block;
width: 100%;
}
.page--activity-download .download__button {
text-align: center;
}
.page--activity-download .download__button .button {
font-size: 1.2em;
margin: 20px 0 0;
}
@media only screen and (min-width: 77.063em) {
.page--activity-gallery .activity-body {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 83.33333%;
width: 83.33333%;
}
}
play-amiibo-tab,
play-related-games-tab {
display: none;
}
.page.page-theme {
position: relative;
}
.page.page-theme .related-games,
.page.page-theme .related-amiibo {
position: relative;
}
.page.page-theme .related-games input,
.page.page-theme .related-amiibo input {
position: absolute;
left: -999em;
}
.page.page-theme .related-games input:checked ~ label,
.page.page-theme .related-amiibo input:checked ~ label {
background: var(--colour-white);
}
.page.page-theme .related-games input:checked ~ .content,
.page.page-theme .related-amiibo input:checked ~ .content {
display: block;
}
.page.page-theme .related-games .content,
.page.page-theme .related-amiibo .content {
-moz-transition: height 0.5s cubic-bezier(0.4, 0.98, 0.07, 0.98);
-o-transition: height 0.5s cubic-bezier(0.4, 0.98, 0.07, 0.98);
-webkit-transition: height 0.5s cubic-bezier(0.4, 0.98, 0.07, 0.98);
transition: height 0.5s cubic-bezier(0.4, 0.98, 0.07, 0.98);
background: var(--colour-white);
height: 0;
overflow: hidden;
}
.page.page-theme .related-games .content play-related-games-tab,
.page.page-theme .related-amiibo .content play-related-games-tab {
display: none;
}
.page.page-theme .related-games .content > .related-games,
.page.page-theme .related-games .content > .related-amiibo,
.page.page-theme .related-amiibo .content > .related-games,
.page.page-theme .related-amiibo .content > .related-amiibo {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
.page.page-theme .related-games .content > .related-games .carousel,
.page.page-theme .related-games .content > .related-amiibo .carousel,
.page.page-theme .related-amiibo .content > .related-games .carousel,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
margin: 20px auto;
text-align: center;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel {
display: inline-block;
height: 210px;
margin: 0;
padding: 0;
vertical-align: top;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel > label,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel > label,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel > label,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel > label,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel > label,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel > label,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel > label,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel > label {
background: url("../svg/icon-close-black.62dc06ead2e9933a.svg") center center no-repeat;
background-size: 30px 30px;
cursor: pointer;
height: 50px;
overflow: hidden;
position: absolute;
right: 10px;
text-indent: -999em;
top: 10px;
width: 50px;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel nav a,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel nav a,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel nav a,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel nav a,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel nav a,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel nav a,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel nav a,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel nav a {
background-color: transparent;
margin: 0;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel .box,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel .box,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel .box,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel .box,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel .box,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel .box,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel .box,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel .box {
border: 0;
height: 100%;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel .box .item,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel .box .item,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel .box .item,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel .box .item,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel .box .item,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel .box .item,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel .box .item,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel .box .item {
height: 100%;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel .swipe-wrapper,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper {
height: 100%;
max-width: 8.75rem;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper {
height: 100%;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper .item,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item {
float: left;
padding: 0 0.75rem;
width: 8.75rem;
}
.page.page-theme .related-games .content > .related-games .carousel .title,
.page.page-theme .related-games .content > .related-amiibo .carousel .title,
.page.page-theme .related-amiibo .content > .related-games .carousel .title,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title {
display: block;
}
.page.page-theme .related-games .content > .related-games .carousel .title h3,
.page.page-theme .related-games .content > .related-amiibo .carousel .title h3,
.page.page-theme .related-amiibo .content > .related-games .carousel .title h3,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title h3 {
color: var(--colour-grey);
font-size: 1.5rem;
text-align: center;
}
.page.page-theme .related-games .content > .related-games .carousel .title h3 a,
.page.page-theme .related-games .content > .related-amiibo .carousel .title h3 a,
.page.page-theme .related-amiibo .content > .related-games .carousel .title h3 a,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title h3 a {
color: var(--colour-grey);
}
.page.page-theme .related-games label.theme-tab,
.page.page-theme .related-amiibo label.theme-tab {
display: none !important;
}
.page.page-theme #characterTabs {
position: relative;
}
.page.page-theme #characterTabs > label {
background: RGBA(255, 255, 255, 0.7);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: var(--colour-grey);
cursor: pointer;
display: inline-block;
font-size: 18px;
font-weight: var(--font-weight-bold);
right: 10px;
line-height: 1em;
padding: 11px 10px 7px 10px;
position: absolute;
text-align: center;
top: 100%;
max-width: 160px;
min-width: 160px;
z-index: 100;
}
.page.page-theme #characterTabs > label.open {
background: var(--colour-white);
}
.page.page-theme #characterTabs > label#tabOpenLabelAmiiboDesktop {
padding: 5px 10px 4px 10px;
right: 180px;
}
.page.page-theme #characterTabs > label#tabOpenLabelAmiiboDesktop span {
background: url("../png/logo-amiibo.349f7bad1158933a.png") left top no-repeat;
background-size: contain;
display: block;
height: 21px;
margin: 4px auto 2px auto;
overflow: hidden;
text-indent: -999em;
width: 96px;
}
.page.page-theme section {
background-position: center;
position: relative;
}
.page.page-theme section .detail {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
.page.page-theme section .detail .masthead_images {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
position: relative;
display: flex;
align-items: flex-end;
}
.page.page-theme section .detail .masthead_images .masthead_image {
display: block;
bottom: 0px;
left: 10px;
width: calc(100% - 20px);
position: absolute;
transition: 1s opacity;
}
.page.page-theme section .detail .masthead_images .masthead_image:first-child {
left: 0;
position: relative;
width: 100%;
}
.page.page-theme section .detail .content,
.page.page-theme section .detail .image {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
}
.page.page-theme section .detail .image-delegate {
background: center bottom no-repeat;
background-size: 100% auto;
height: 100%;
}
.page.page-theme section .detail .content p, .page.page-theme section .detail .content h1, .page.page-theme section .detail .content h2 {
color: var(--colour-white);
}
.page.page-theme section .detail .content .small-only {
display: block;
}
.page.page-theme section .detail .content .medium-up,
.page.page-theme section .detail .content .medium-only,
.page.page-theme section .detail .content .large-up,
.page.page-theme section .detail .content .large-only,
.page.page-theme section .detail .content .xlarge-up,
.page.page-theme section .detail .content .xlarge-only {
display: none;
}
.page.page-theme section.dark .detail .content p, .page.page-theme section.dark .detail .content h1, .page.page-theme section.dark .detail .content h2 {
color: var(--colour-black);
}
.page.page-theme section .friendlist-view {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
left: 0px;
position: absolute;
width: 100%;
}
.page.page-theme section .friendlist-view h2 {
text-align: center;
}
.page.page-theme section .friendlist-view .friendlist {
margin: 10px auto;
}
.page.page-theme section .friendlist-view .friendlist .switcher {
height: 5rem;
position: relative;
text-align: center;
}
.page.page-theme section .friendlist-view .friendlist .switcher nav .icon {
top: -webkit-calc(50% - 21px);
top: calc(50% - 21px);
background-size: contain;
display: block;
height: 42px;
overflow: hidden;
position: absolute;
text-indent: -999em;
width: 42px;
-moz-transition: -moz-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.page.page-theme section .friendlist-view .friendlist .switcher nav .icon.nav-left {
left: -45px;
}
.page.page-theme section .friendlist-view .friendlist .switcher nav .icon.nav-right {
right: -45px;
}
.page.page-theme section .friendlist-view .friendlist .switcher nav .icon:hover, .page.page-theme section .friendlist-view .friendlist .switcher nav .icon:focus {
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.page.page-theme section .friendlist-view .friendlist .switcher .container {
overflow: hidden;
padding: 0;
}
.page.page-theme section .friendlist-view .friendlist .switcher .container ul {
display: inline-block;
margin: 0px;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
-moz-transition: -moz-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
transition: transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
}
.page.page-theme section .friendlist-view .friendlist .switcher .container ul.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
.page.page-theme section .friendlist-view .friendlist .switcher .container ul li {
display: inline-block;
width: 97px;
}
.page.page-theme section .friendlist-view .friendlist .switcher .container ul li a {
color: var(--colour-white);
display: block;
border: 4px solid var(--colour-white);
border-radius: 10rem;
display: block;
height: 5rem;
margin: 0px auto;
overflow: hidden;
text-align: center;
width: 5rem;
}
.page.page-theme section .friendlist-view .friendlist .switcher .container ul li a img {
max-height: 100%;
max-width: 100%;
}
@media only screen and (min-width: 1100px) {
.page.page-theme label {
left: -webkit-calc(50% + 550px - 160px);
left: calc(50% + 550px - 160px);
right: auto !important;
}
.page.page-theme label#tabOpenLabelAmiiboDesktop {
left: -webkit-calc(50% + 370px - 160px);
left: calc(50% + 370px - 160px);
}
}
@media only screen and (min-width: 60em) {
.page.page-theme .related-games .content > .related-games .carousel .title,
.page.page-theme .related-games .content > .related-amiibo .carousel .title,
.page.page-theme .related-amiibo .content > .related-games .carousel .title,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title {
border-left: 3px solid var(--colour-lightgrey);
display: inline-block;
height: 200px;
padding-left: 20px;
position: relative;
width: 300px;
}
.page.page-theme .related-games .content > .related-games .carousel .title h3,
.page.page-theme .related-games .content > .related-amiibo .carousel .title h3,
.page.page-theme .related-amiibo .content > .related-games .carousel .title h3,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title h3 {
top: -webkit-calc(50% - 1.5em);
top: calc(50% - 1.5em);
position: absolute;
text-align: left;
}
.page.page-theme section .detail .content h1 {
font-size: 3em;
margin-top: 2em;
}
}
@media only screen and (min-width: 43.063em) {
.page.page-theme .related-games input,
.page.page-theme .related-amiibo input {
position: absolute;
left: -999em;
}
.page.page-theme .related-games input:checked ~ label,
.page.page-theme .related-amiibo input:checked ~ label {
background: var(--colour-white);
}
.page.page-theme .related-games input:checked ~ .content,
.page.page-theme .related-amiibo input:checked ~ .content {
height: 230px;
position: initial;
width: 100%;
}
.page.page-theme .related-games .content > .related-games .carousel,
.page.page-theme .related-games .content > .related-amiibo .carousel,
.page.page-theme .related-amiibo .content > .related-games .carousel,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 83.33333%;
width: 83.33333%;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel {
padding: 0 50px;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel .swipe-wrapper,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel .swipe-wrapper,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel .swipe-wrapper {
max-width: 26.25rem;
}
.page.page-theme .related-games .content > .related-games .carousel #game-carousel nav,
.page.page-theme .related-games .content > .related-games .carousel #amiibo-carousel nav,
.page.page-theme .related-games .content > .related-amiibo .carousel #game-carousel nav,
.page.page-theme .related-games .content > .related-amiibo .carousel #amiibo-carousel nav,
.page.page-theme .related-amiibo .content > .related-games .carousel #game-carousel nav,
.page.page-theme .related-amiibo .content > .related-games .carousel #amiibo-carousel nav,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #game-carousel nav,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel #amiibo-carousel nav {
left: 0px;
}
.page.page-theme .related-games > label,
.page.page-theme .related-amiibo > label {
display: inline-block;
}
.page.page-theme .theme-filter {
display: block;
}
.page.page-theme .theme-filter-mobile {
display: none;
}
.page.page-theme section .detail {
position: relative;
}
.page.page-theme section .detail .masthead_images {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 50%;
width: 50%;
}
.page.page-theme section .detail .content,
.page.page-theme section .detail .image {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 50%;
width: 50%;
}
.page.page-theme section .detail .content {
margin: 5em 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.page.page-theme section .detail .content h1 {
margin-top: 0;
}
.page.page-theme section .detail .content .small-only {
display: none;
}
.page.page-theme section .detail .content .medium-up,
.page.page-theme section .detail .content .medium-only,
.page.page-theme section .detail .content .small-medium-only {
display: block;
}
.page.page-theme section .friendlist-view {
padding: 10px 0;
}
.page.page-theme section .friendlist-view .friendlist {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
.page.page-theme section .friendlist-view .friendlist .switcher {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 83.33333%;
width: 83.33333%;
}
.page.page-theme section .friendlist-view .friendlist .switcher nav {
display: block;
}
.page.page-theme section .friendlist-view .friendlist .switcher .container {
margin: auto;
}
.page.page-theme section .friendlist-view .friendlist .switcher .container ul li {
width: 98px;
}
.page.page-theme .tabOpenLabelMobile {
display: none;
}
html.no-flexboxlegacy .page.page-theme section .detail {
height: 100%;
}
}
@media only screen and (min-width: 77.063em) {
.page.page-theme section .detail .content .small-only,
.page.page-theme section .detail .content .medium-only,
.page.page-theme section .detail .content .small-medium-only {
display: none;
}
.page.page-theme section .detail .content .medium-up,
.page.page-theme section .detail .content .large-up {
display: block;
}
}
@media screen and (max-width: 1030px) {
.page.page-theme .related-games .content > .related-games .carousel .title,
.page.page-theme .related-games .content > .related-amiibo .carousel .title,
.page.page-theme .related-amiibo .content > .related-games .carousel .title,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title {
display: none;
}
}
@media only screen and (max-width: 43em) {
.page.page-theme .related-games .content,
.page.page-theme .related-amiibo .content {
background: rgba(255, 255, 255, 0.7);
display: none;
height: 100%;
left: 0px;
padding: 10px;
position: fixed;
top: 0px;
width: 100%;
z-index: 99998;
}
.page.page-theme .related-games .content > .related-games,
.page.page-theme .related-games .content > .related-amiibo,
.page.page-theme .related-amiibo .content > .related-games,
.page.page-theme .related-amiibo .content > .related-amiibo {
background: var(--colour-white);
border: 1px solid #b8b8b7;
border-radius: 2px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
display: block;
padding-top: 20px;
}
.page.page-theme .related-games .content > .related-games .carousel .title,
.page.page-theme .related-games .content > .related-amiibo .carousel .title,
.page.page-theme .related-amiibo .content > .related-games .carousel .title,
.page.page-theme .related-amiibo .content > .related-amiibo .carousel .title {
display: block;
}
.page.page-theme section .friendlist-view .friendlist .switcher nav {
display: none !important;
}
.page.page-theme section .detail .content h2 {
font-size: 1.3em;
}
.page.page-theme #characterTabs {
display: none;
}
}
.page-theme-character section {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.page-theme-character section .detail {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.page-theme-character section .detail h1 {
margin-top: 1em;
}
.page-theme-character section .image {
position: relative;
}
.page-theme-character section .image img {
position: absolute;
bottom: 0;
left: 10px;
width: calc(100% - 20px);
transition: opacity 1s ease;
opacity: 0;
}
.page-theme-character section .image img:first-child {
width: 100%;
position: static;
opacity: 1;
}
.page-theme-character play-theme-related-box {
display: none;
}
.page-theme-character__related-box .swiper--products .swiper__item-title {
text-align: left;
}
@media only screen and (min-width: 43.063em) {
.page-theme-character section .detail {
display: flex;
overflow: hidden;
}
.page-theme-character section .detail .content,
.page-theme-character section .detail .image {
float: none;
}
.page-theme-character section .detail .image {
-ms-flex-item-align: end;
-webkit-flex-item-align: end;
align-self: flex-end;
}
}
.explore-tiles {
margin-top: 50px;
}
.explore-tiles__title {
text-align: center;
}
@media only screen and (min-width: 43.063em) {
.explore-tiles {
margin-top: 70px;
}
}
@media only screen and (min-width: 77.063em) {
.explore-tiles {
margin-top: 90px;
}
}
[class*='row-flex'],
.row {
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
.row {
padding-left: 10px;
padding-right: 10px;
}
[class*='column-flex'] {
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (min-width: 43.063em) {
.row,
[class*='row-flex'] {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
}
.row-flex {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
}
.row-flex-nowrap {
-ms-flex-wrap: none;
flex-wrap: nowrap;
}
.row-flex-vertical-center {
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
}
.row-flex-vertical-center [class*="column-flex"] {
margin-top: 0;
margin-bottom: 0;
}
.row-flex-vertical-uncenter {
-ms-flex-align: baseline;
-webkit-flex-align: baseline;
align-items: baseline;
}
.row-flex-horizontal-uncenter {
-ms-flex-pack: start;
-webkit-flex-pack: start;
justify-content: flex-start;
}
.column-flex-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
width: 8.33333%;
max-width: 8.33333%;
}
.column-flex-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
width: 16.66667%;
max-width: 16.66667%;
}
.column-flex-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
width: 25%;
max-width: 25%;
}
.column-flex-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
width: 33.33333%;
max-width: 33.33333%;
}
.column-flex-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
width: 41.66667%;
max-width: 41.66667%;
}
.column-flex-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
width: 50%;
max-width: 50%;
}
.column-flex-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
width: 58.33333%;
max-width: 58.33333%;
}
.column-flex-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
width: 66.66667%;
max-width: 66.66667%;
}
.column-flex-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
width: 75%;
max-width: 75%;
}
.column-flex-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
width: 83.33333%;
max-width: 83.33333%;
}
.column-flex-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
width: 91.66667%;
max-width: 91.66667%;
}
.column-flex-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 77.063em) {
.row-flex-large {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
}
.row-flex-large-nowrap {
-ms-flex-wrap: none;
flex-wrap: nowrap;
}
.row-flex-large-vertical-center {
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
}
.row-flex-large-vertical-center [class*="column-flex"] {
margin-top: 0;
margin-bottom: 0;
}
.row-flex-large-vertical-uncenter {
-ms-flex-align: baseline;
-webkit-flex-align: baseline;
align-items: baseline;
}
.row-flex-large-horizontal-uncenter {
-ms-flex-pack: start;
-webkit-flex-pack: start;
justify-content: flex-start;
}
.column-flex-large-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
width: 8.33333%;
max-width: 8.33333%;
}
.column-flex-large-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
width: 16.66667%;
max-width: 16.66667%;
}
.column-flex-large-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
width: 25%;
max-width: 25%;
}
.column-flex-large-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
width: 33.33333%;
max-width: 33.33333%;
}
.column-flex-large-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
width: 41.66667%;
max-width: 41.66667%;
}
.column-flex-large-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
width: 50%;
max-width: 50%;
}
.column-flex-large-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
width: 58.33333%;
max-width: 58.33333%;
}
.column-flex-large-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
width: 66.66667%;
max-width: 66.66667%;
}
.column-flex-large-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
width: 75%;
max-width: 75%;
}
.column-flex-large-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
width: 83.33333%;
max-width: 83.33333%;
}
.column-flex-large-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
width: 91.66667%;
max-width: 91.66667%;
}
.column-flex-large-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 100.063em) {
.row-flex-xlarge {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
}
.row-flex-xlarge-nowrap {
-ms-flex-wrap: none;
flex-wrap: nowrap;
}
.row-flex-xlarge-vertical-center {
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
}
.row-flex-xlarge-vertical-center [class*="column-flex"] {
margin-top: 0;
margin-bottom: 0;
}
.row-flex-xlarge-vertical-uncenter {
-ms-flex-align: baseline;
-webkit-flex-align: baseline;
align-items: baseline;
}
.row-flex-xlarge-horizontal-uncenter {
-ms-flex-pack: start;
-webkit-flex-pack: start;
justify-content: flex-start;
}
.column-flex-xlarge-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
width: 8.33333%;
max-width: 8.33333%;
}
.column-flex-xlarge-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
width: 16.66667%;
max-width: 16.66667%;
}
.column-flex-xlarge-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
width: 25%;
max-width: 25%;
}
.column-flex-xlarge-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
width: 33.33333%;
max-width: 33.33333%;
}
.column-flex-xlarge-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
width: 41.66667%;
max-width: 41.66667%;
}
.column-flex-xlarge-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
width: 50%;
max-width: 50%;
}
.column-flex-xlarge-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
width: 58.33333%;
max-width: 58.33333%;
}
.column-flex-xlarge-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
width: 66.66667%;
max-width: 66.66667%;
}
.column-flex-xlarge-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
width: 75%;
max-width: 75%;
}
.column-flex-xlarge-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
width: 83.33333%;
max-width: 83.33333%;
}
.column-flex-xlarge-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
width: 91.66667%;
max-width: 91.66667%;
}
.column-flex-xlarge-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 140.063em) {
.row-flex-xxlarge {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
}
.row-flex-xxlarge-nowrap {
-ms-flex-wrap: none;
flex-wrap: nowrap;
}
.row-flex-xxlarge-vertical-center {
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
}
.row-flex-xxlarge-vertical-center [class*="column-flex"] {
margin-top: 0;
margin-bottom: 0;
}
.row-flex-xxlarge-vertical-uncenter {
-ms-flex-align: baseline;
-webkit-flex-align: baseline;
align-items: baseline;
}
.row-flex-xxlarge-horizontal-uncenter {
-ms-flex-pack: start;
-webkit-flex-pack: start;
justify-content: flex-start;
}
.column-flex-xxlarge-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
width: 8.33333%;
max-width: 8.33333%;
}
.column-flex-xxlarge-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
width: 16.66667%;
max-width: 16.66667%;
}
.column-flex-xxlarge-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
width: 25%;
max-width: 25%;
}
.column-flex-xxlarge-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
width: 33.33333%;
max-width: 33.33333%;
}
.column-flex-xxlarge-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
width: 41.66667%;
max-width: 41.66667%;
}
.column-flex-xxlarge-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
width: 50%;
max-width: 50%;
}
.column-flex-xxlarge-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
width: 58.33333%;
max-width: 58.33333%;
}
.column-flex-xxlarge-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
width: 66.66667%;
max-width: 66.66667%;
}
.column-flex-xxlarge-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
width: 75%;
max-width: 75%;
}
.column-flex-xxlarge-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
width: 83.33333%;
max-width: 83.33333%;
}
.column-flex-xxlarge-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
width: 91.66667%;
max-width: 91.66667%;
}
.column-flex-xxlarge-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
}
.skippers {
background: #FFBA00;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 0;
overflow: hidden;
}
.skippers:focus-within {
height: auto;
}
.skippers__item {
margin: 20px 5px;
border-color: var(--colour-grey);
border-width: 2px;
background: transparent;
box-shadow: none;
padding: 10px 24px;
}
.skippers__item:hover, .skippers__item:focus {
opacity: 1;
outline: none;
background: white;
}
.social-container {
display: flex;
align-items: center;
justify-content: center;
}
.social-container nclood-social {
display: none;
line-height: 0;
}
.social-container nclood-social .fb-like.fb_iframe_widget {
display: none;
}
.social-container .social-container {
display: flex;
align-items: center;
}
.social-container .URLShare {
position: relative;
z-index: 2;
}
.social-container .URLShare p {
border-radius: 4px;
color: #fff;
display: block;
font-size: 11px;
font-weight: normal;
margin: 0px 0px 0px 4px;
padding: 4px 6px 5px 6px;
background: var(--colour-grey);
cursor: pointer;
}
.social-container .URLShare .URLField {
-moz-transform: translate(-50%, -100%);
-ms-transform: translate(-50%, -100%);
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
display: none;
left: 50%;
height: 60px;
padding-bottom: 15px;
position: absolute;
top: 0;
width: 370px;
}
.social-container .URLShare .URLField::after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 192, 250, 0);
border-top-color: #00c0fa;
border-width: 10px;
margin-left: -10px;
margin-top: -15px;
}
.social-container .URLShare .URLField input {
color: var(--colour-grey);
background: #fff;
bottom: 10px;
border: 1px solid #e5e5e5;
border-bottom: 5px solid #00c0fa;
left: 0px;
padding: 10px;
position: absolute;
width: 100%;
}
.social-container .URLShare:hover p, .social-container .URLShare:focus p {
background: var(--colour-midgrey);
}
.social-container .URLShare:hover .URLField, .social-container .URLShare:focus .URLField {
-webkit-animation: popupReveal 0.5s both;
-moz-animation: popupReveal 0.5s both;
-o-animation: popupReveal 0.5s both;
animation: popupReveal 0.5s both;
display: block;
}
.social-container .URLShare:focus-within p {
background: var(--colour-midgrey);
}
.social-container .URLShare:focus-within .URLField {
-webkit-animation: popupReveal 0.5s both;
-moz-animation: popupReveal 0.5s both;
-o-animation: popupReveal 0.5s both;
animation: popupReveal 0.5s both;
display: block;
}
.social-container .URLShare:focus {
outline: none;
box-shadow: none;
}
.social-container .URLShare:focus p {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.social-container .URLShare:focus:not(:focus-visible) p {
box-shadow: none;
}
.tile {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
display: flex;
flex-direction: column;
padding: 0;
}
.tile:hover, .tile:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.tile:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.tile:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.tile:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.tile:hover .tile__verb, .tile:focus-visible .tile__verb {
transform: rotateX(360deg);
}
.tile__img,
.tile__content {
flex-basis: 50%;
}
.tile__img {
background-color: rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
flex-shrink: 0;
}
.tile__img--main {
display: none;
}
.tile__content {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 3em 1em 1em;
text-align: center;
}
.tile__content.light {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--colour-white);
}
.tile__content.light .tile__verb {
background: rgba(0, 0, 0, 0.4);
}
.tile__verb,
.tile__title,
.tile__subtitle {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
color: inherit;
margin: 0.562em 0 0;
max-width: 100%;
}
.tile__verb {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-normal);
line-height: 1.4;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 2em;
display: inline-block;
font-size: 0.75rem;
font-weight: var(--font-weight-bold);
margin-top: 0;
padding: 0.25em 0.75em 0.125em;
text-transform: uppercase;
transform-style: preserve-3d;
transition: transform 0.4s ease;
will-change: transform;
}
.tile__title {
font-size: 1.25em;
}
.tile__subtitle {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-normal);
line-height: 1.4;
font-size: 0.875em;
line-height: 1.4;
}
.tile__icon {
border-radius: 50%;
background-color: inherit;
left: 50%;
padding: 0.5em;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.tile--importance-one {
justify-content: center;
}
.tile--importance-one .tile__img {
display: none;
}
.tile--importance-one .tile__icon {
top: 0.5em;
left: auto;
right: 0;
transform: none;
border-radius: 50% 0 0 50%;
background-color: white;
}
.tile--importance-one .tile__icon .icon {
min-width: 0;
width: 48px;
}
.tile--importance-one .tile__content {
padding-top: 1em;
flex-basis: auto;
}
.tile--importance-two.tile--direction-v.tile--subposition-r {
flex-direction: column-reverse;
}
.tile--importance-two.tile--direction-v.tile--subposition-r .tile__content {
padding-top: 1em;
padding-bottom: 2.5em;
}
@media screen and (min-width: 520px) {
.tile--importance-featured {
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
}
.tile--importance-featured .tile__img {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.tile--importance-featured .tile__img--main {
display: block;
}
.tile--importance-featured .tile__subtitle,
.tile--importance-featured .tile__img--profile {
display: none;
}
.tile--importance-featured .tile__icon {
background-color: white;
border-radius: 50% 0 0 50%;
left: 0;
margin-top: 1em;
position: relative;
transform: none;
top: 0;
}
.tile--importance-featured .tile__content {
align-items: flex-start;
flex: 1;
position: relative;
padding-top: 1em;
text-align: left;
}
.tile--importance-two.tile--direction-h {
flex-direction: row;
}
.tile--importance-two.tile--direction-h .tile__content {
padding: 1em 1em 1em 2.5em;
}
.tile--importance-two.tile--direction-h.tile--subposition-r {
flex-direction: row-reverse;
}
.tile--importance-two.tile--direction-h.tile--subposition-r .tile__content {
padding: 1em 2.5em 1em 1em;
}
.tile--importance-featured .tile__subtitle {
display: block;
}
.no-cssgrid .tile--importance-featured,
.no-cssgrid .tile--direction-v {
flex-direction: row-reverse;
}
.no-cssgrid .tile--importance-featured .tile__content,
.no-cssgrid .tile--direction-v .tile__content {
padding: 1em 3em 1em 1em;
}
.no-cssgrid .tile--importance-featured.tile--subposition-r,
.no-cssgrid .tile--direction-v.tile--subposition-r {
flex-direction: row;
text-align: right;
}
.no-cssgrid .tile--importance-featured.tile--subposition-r .tile__content,
.no-cssgrid .tile--direction-v.tile--subposition-r .tile__content {
align-items: flex-end;
padding: 1em 1em 1em 3em;
}
.no-cssgrid .tile--importance-featured {
align-items: center;
}
.no-cssgrid .tile--importance-featured .tile__img--main {
display: none;
}
.no-cssgrid .tile--importance-featured .tile__img--profile {
display: block;
}
.no-cssgrid .tile--importance-featured .tile__img {
position: static;
}
.no-cssgrid .tile--importance-featured .tile__icon {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: inherit;
border-radius: 50%;
}
}
.tile-theme:hover .tile-theme__img, .tile-theme:focus .tile-theme__img {
background-position: 9999px;
transform: rotateY(360deg) translateZ(0);
}
.tile-theme:hover .tile-theme__img::after, .tile-theme:focus .tile-theme__img::after {
transform: rotateY(360deg);
}
.tile-theme__img {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
background-size: cover;
background-position: center center;
border-radius: 50%;
position: relative;
overflow: hidden;
width: calc(100% - 1.875em);
margin: 0 auto;
transition: transform 0.8s ease-out;
will-change: transform;
}
.tile-theme__img::before, .tile-theme__img::after {
content: ' ';
height: 100%;
width: 100%;
border-radius: 50%;
display: block;
}
.tile-theme__img::after {
backface-visibility: hidden;
background-image: inherit;
background-size: inherit;
left: 0;
position: absolute;
top: 0;
transition: transform 0.75s ease-out;
will-change: transform;
}
.tile-theme__img::before {
background-color: inherit;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.05) 100%);
background-size: 100%;
transform: rotate(45deg);
padding-bottom: 100%;
}
.tile-theme__title {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-normal);
line-height: 1.4;
color: inherit;
margin: 0.75rem 0 0;
font-size: 0.875rem;
font-weight: var(--font-weight-bold);
text-align: center;
}
.tile-special {
overflow: hidden;
cursor: pointer;
border: none;
padding: 0;
background: transparent;
}
.tile-special::after {
content: "";
animation: shakeDelay 5s infinite linear;
background: url("../svg/surprise-block.1a8d347f86bb933a.svg") center center/90% auto no-repeat;
display: block;
height: 100%;
}
.blog__content {
max-width: 1180px;
margin: 0 auto 20px;
padding: 0 10px;
}
.blog__content .blog-sidebar {
display: none;
}
@media only screen and (min-width: 60em) {
.blog__content {
display: flex;
flex-direction: row-reverse;
}
.blog__content .blog-post,
.blog__content .blog-list {
width: 76%;
padding-right: 20px;
}
.blog__content .blog-sidebar {
display: block;
flex: 1;
}
}
.blog-post__content {
background: var(--colour-surface);
padding: 10px;
}
.blog-post__footer {
margin-top: 20px;
}
.blog-list {
max-width: 310px;
margin: 0 auto;
}
.blog-list .invisibleEndPlaceholder {
position: absolute;
}
.blog-list-item {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
display: block;
background-color: var(--colour-awbnq);
padding: 8px;
text-decoration: none;
color: var(--colour-black);
margin-bottom: 15px;
}
.blog-list-item:hover, .blog-list-item:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.blog-list-item:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.blog-list-item:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.blog-list-item:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.blog-list-item:hover .blog-list-item__cat, .blog-list-item:focus .blog-list-item__cat {
transform: rotateX(360deg);
}
.blog-list-item.light {
color: var(--colour-white);
}
.blog-list-item.light .blog-list-item__cat {
background-color: rgba(0, 0, 0, 0.4);
}
.blog-list-item__img img {
display: block;
width: 100%;
}
.blog-list-item__img + .blog-list-item__detail {
margin-top: 16px;
}
.blog-list-item__cat {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2em;
display: inline-block;
font-weight: var(--font-weight-bold);
font-size: 0.75rem;
line-height: 1;
padding: 4px 8px;
text-decoration: none;
text-transform: uppercase;
transform-style: preserve-3d;
transition: transform 0.4s ease;
will-change: transform;
}
.blog-list-item__title {
font-weight: var(--font-weight-bold);
font-size: 1.125rem;
margin: 8px 0;
}
.blog-list-item__cta {
margin-top: 8px;
}
@media screen and (min-width: 520px) {
.blog-list {
max-width: none;
}
.blog-list-item {
display: flex;
}
.blog-list-item__img {
margin-bottom: 0;
padding-right: 24px;
flex: 1 1 45%;
max-width: 280px;
}
.blog-list-item__img img {
object-fit: cover;
width: 100%;
}
.blog-list-item__img + .blog-list-item__detail {
margin-top: 8px;
}
.blog-list-item__detail {
flex: 1 1 55%;
padding-right: 10px;
}
}
.blog-sidebar a {
display: block;
text-decoration: none;
}
.blog-sidebar a.is-selected, .blog-sidebar a:hover, .blog-sidebar a:focus {
background: var(--colour-black);
color: var(--colour-white);
}
.blog-sidebar__title {
margin: 0 0 8px 0;
text-align: center;
}
.blog-sidebar__category ul {
padding: 6px;
background: #FFF;
border: 2px solid var(--colour-black);
border-radius: 30px;
}
.blog-sidebar__category ul li:not(:last-of-type) {
margin-bottom: 12px;
}
.blog-sidebar__category a {
font-size: 1.125rem;
padding: 13px 24px;
border-radius: 30px;
}
.blog-sidebar__category a.is-selected, .blog-sidebar__category a:hover, .blog-sidebar__category a:focus {
font-weight: var(--font-weight-bold);
}
.blog-sidebar__popular {
margin-top: 20px;
}
.blog-sidebar__popular a {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
--border-thickness: 2px;
--shadow-base: 4px;
--shadow-indent: -2px;
background-color: var(--colour-white);
display: block;
margin: 0 0 20px 0;
padding: 8px;
}
.blog-sidebar__popular a:hover, .blog-sidebar__popular a:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.blog-sidebar__popular a:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.blog-sidebar__popular a:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.blog-sidebar__popular a:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.blog-sidebar__popular p:not(.blog-sidebar__title) {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
font-size: 1.125rem;
margin: 8px 0 0 4px;
}
.ath-viewport * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ath-viewport {
position: relative;
z-index: 2147483641;
pointer-events: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
.ath-modal {
pointer-events: auto !important;
background: rgba(0, 0, 0, 0.6);
}
.ath-mandatory {
background: var(--colour-black);
}
.ath-container {
pointer-events: auto !important;
position: absolute;
z-index: 2147483641;
padding: 0.7em 0.6em;
width: 18em;
background: #eee;
background-size: 100% auto;
box-shadow: 0 0.2em 0 #d1d1d1;
font-family: sans-serif;
font-size: 15px;
line-height: 1.5em;
text-align: center;
}
.ath-container small {
font-size: 0.8em;
line-height: 1.3em;
display: block;
margin-top: 0.5em;
}
.ath-ios.ath-phone {
bottom: 1.8em;
left: 50%;
margin-left: -9em;
}
.ath-ios6.ath-tablet {
left: 5em;
top: 1.8em;
}
.ath-ios7.ath-tablet {
left: 0.7em;
top: 1.8em;
}
.ath-ios8.ath-tablet {
right: 0.4em;
top: 1.8em;
}
.ath-android {
bottom: 1.8em;
left: 50%;
margin-left: -9em;
}
/* close icon */
.ath-container:before {
content: '';
position: relative;
display: block;
float: right;
margin: -0.7em -0.6em 0 0.5em;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAdVBMVEUAAAA5OTkzMzM7Ozs3NzdBQUFAQEA/Pz8+Pj5BQUFAQEA/Pz8+Pj5BQUFAQEA/Pz9BQUE+Pj4/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8+Pj4/Pz8+Pj4/Pz8/Pz8/Pz8/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8/Pz9AQEA/Pz+fdCaPAAAAJnRSTlMACQoNDjM4OTo7PEFCQ0RFS6ytsbS1tru8vcTFxu7x8vX19vf4+C5yomAAAAJESURBVHgBvdzLTsJAGEfxr4C2KBcVkQsIDsK8/yPaqIsPzVlyzrKrX/5p0kkXEz81L23otc9NpIbbWia2YVLqdnhlqFlhGWpSDHe1aopsSIpRb8gK0dC3G30b9rVmhWZIimTICsvQtx/FsuYOrWHoDjX3Gu31gzJxdki934WrAIOsAIOsAIOiAMPhPsJTgKGN0BVsYIVsYIVpYIVpYIVpYIVpYIVpYIVpYIVpYIVlAIVgEBRs8BRs8BRs8BRs8BRs8BRs8BRs8BRTNmgKNngKNngKNngKNngKNhiKGxgiOlZoBlaYBlaYBlaYBlaYBlaYBlaYBlaYBlZIBlBMfQMrVAMr2KAqBENSHFHhGEABhi5CV6gGUKgGUKgGUKgGUFwuqgEUvoEVsoEVpoEUpgEUggF+gKTKY+h1fxSlC7/Z+RrxOQ3fcEoAPPHZBlaYBlaYBlaYBlZYBlYIhvLBCstw7PgM7hkiWOEZWGEaWGEaWGEaIsakEAysmHkGVpxmvoEVqoEVpoEVpoEVpoEVpoEVpoEVkoEVgkFQsEFSsEFQsGEcoSvY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnmbNAUT2c2WAo2eAo2eAo2eAo2eAo2eArNEPFACjZ4CjZ4CjZ4CjaIird/rBvFH6llNCvewdli1URWCIakSIZesUaDoFg36dKFWk9zCZDei3TtwmCj7pC22AwikiIZPEU29IpFNliKxa/hC9DFITjQPYhcAAAAAElFTkSuQmCC);
background-color: rgba(255, 255, 255, 0.8);
background-size: 50%;
background-repeat: no-repeat;
background-position: 50%;
width: 2.7em;
height: 2.7em;
text-align: center;
overflow: hidden;
color: #a33;
z-index: 2147483642;
}
.ath-container.ath-icon:before {
position: absolute;
top: 0;
right: 0;
margin: 0;
float: none;
}
.ath-mandatory .ath-container:before {
display: none;
}
.ath-container.ath-android:before {
float: left;
margin: -0.7em 0.5em 0 -0.6em;
}
.ath-container.ath-android.ath-icon:before {
position: absolute;
right: auto;
left: 0;
margin: 0;
float: none;
}
/* applied only if the application icon is shown */
.ath-action-icon {
display: inline-block;
vertical-align: middle;
background-position: 50%;
background-repeat: no-repeat;
text-indent: -9999em;
overflow: hidden;
}
.ath-ios7 .ath-action-icon,
.ath-ios8 .ath-action-icon {
width: 1.6em;
height: 1.6em;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAACtCAYAAAB7l7tOAAAF6UlEQVR4AezZWWxUZRiH8VcQEdxZEFFiUZBFUCIa1ABBDARDcCciYGKMqTEGww3SOcNSAwQTjOBiiIpEhRjAhRgXRC8MFxojEhAFZUGttVhaoSxlaW3n8W3yXZxm6vTrOMM5Q98n+V9MMu1pvl++uZhKuypghu49KaaTWGdZSYoVN6VD95nMpLNYZ9XNbdQR2od2k88O3Gm6Bh0t7H0p5Vwp2Ax3ajpu2tYbciFWwkTFO63DY6+JcI4USFaSyYpWp8N7SVZJKR3EinkBk9JxvZFXxhnZSjBaoWp1ZL0ES8WKYXMZp0AndORgy8WKFe5Yf1zvvSBWDEpys2LU6MjD5kmEWQlGKsJRHXlcqUSQVcItEnDEA6gAb7LhjvD9WO6yIEfICQI5A1nzGCYB1T4og5bBiFcyv2f6ujYhl4iVxwKG6qp8MK55HsqPwK0rMr9v/yEo3uCPrJstVh5KMER30Aeh31Ioq0FrHfjXw9CYghnrvYFTuqfEymFzGSwBlT4ARYr7u+K6GLmCVGvAGg2NMG0d/sgJnpScZLjXSkC5z8H3eQ72/k24Q8NfzvwFyK4qtuJSZKaubRPyE/K/Mtx+EvCHL+7uasId1t10w0scz/RzSzYzAfgKV30D3LPaG7lRkR8RK4tKKJKAMp+D7r0EfmmOe0x3m2itAc/ZxBjgAt1mXHWKPPkdb+QGSTJdrDaU5EoJ2OtzwD0WwY7KNNzbRfMFFg24WPdtGHnS221Cflgsj56hjwTs8TnY7oq7/QDhjutGicsb2AVcovsO18l6uPPNNiE/JFaGAq7Q7fY50G4LYVtz3FrdaNGyBXbIl+q24DqhyHes9EaulwR3SwtZs+ktAT/7HORliru1gnCndONFyx44Dfn7MPLYN7yR6yTJZAllJeguAT/4HOBFz8I3ZWm4E0TLFbBD7qn7EVdtHYx53R9ZN0ksrZRuErDN5+AuLIWvm+Oe1k0ULdfADrmX7idcR0/DyBXeyCdlLuMMOGCBz4F1ng+f7yFcve5e0fIFHELeiav6BAx70Rt5p0yhY3u/wR0kyarW/uX35b403PtFyzewQ75ctwtXzSkY8WqruHslSV8RscrL6TJ1bcvfWJ0/HzbtIdw/ugdFyzdwOOAq3T6fmzxwGQ3vbmO8iFioIWqYSsHMj9M/ljfuTsOdItoZBXYBfXX7cVXVwvXLm/8+fU3lcdCqdEMNGBbgUmRmfQISQKd5sGEn4VK6YtEiAXYBA3QVuA4q8hCHrDcafR1ul65jewfuovsCl7vJrNlOuEbdo6JFCuwCrtb9hqusBu56Cw4cI1y1briIWEBn3Ue0XKPuMdGiBg4H9NdV0HJ/6QZLOEPmPN0GmpfSPS5arIBdwHUtIFfoBsl/ZsgfhHCfFi2WwC5goO4AmvanbqBkzJA76tboZokWa2AXMEi3RTdAvDLkDqJFAhzB32xFD2wZsGXA0WfAlgFbBmwZsGXAlgFbBpzk04JaKb0iA9ZnF9x5SQAFtRKKIgPWZxfaeRmwAZ/BGbAB37eaG6MCbnq2Aed5czYyKirgpmcbsAHHZAZswN0Wwo7KeG1fFf2jAm56dtzOQ42yB+65mDhWFBUwUETMUiMDNmADbp/APRaTAh6I2bpGCNw1bufRZJQ1cPdF/NueHZsgDEBBGLbMGoIu4AZu5gLOZeEaYmEXeznF3jRPyEv4frgJvvJe3qTefY0AAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwb8rwADBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgz4/sz1Nia/9hizA7zgklwy3RYwYMBzBRjw4bPjxAbAAizAAtwgwAIswAIswAIMGDBgARZgARZgAS4FWIAFWIAFWIABAwYswAIswAIswIUAC7AAC7AACzBgwIAFWIAFWIAFuBBgARZgARZgAQYMGPApQ99ZCdgWtzqwATbABtgAG2DbnxNb7zbRimsMLMACrDf2wMWI/WasfQAAAABJRU5ErkJggg==);
margin-top: -0.3em;
background-size: auto 100%;
}
.ath-ios6 .ath-action-icon {
width: 1.8em;
height: 1.8em;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAB0CAQAAADAmnOnAAAAAnNCSVQICFXsRgQAAAAJcEhZcwAAWwEAAFsBAXkZiFwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAF4klEQVR4Ae3a/a+XdR3H8ec5HM45HDmKICoVohkZsxESRRCzcZM/2JKkdGR5MrSkleA0Pd00O4u5IVuNM2yYc6XSzCExU4oUNRPCJFdMUAhsYZpUGhscOHA4N8/WZzsL6HBxvofvdV3fa3yer//gsV3vH659KHzncBsJxUYhDzOEhCKQbORs+ip2wzgM+wvj+P9i35qAGLaHGcQSgKSTrxBLABJppZpYApCspoFYApBsZjSxBCD5OxOJJQBJG1cQSwCSLpqJJQCJ3MvgCGTinuSMCJS8LZwfgZL3FtMiUPIOcU0ESl4PLRHoRPsJtREoeRsYGYGS9yrvo6RmpbLaigWSfzOdErLs6+bLUMFA0sF1+QF1cz1UNlBYK9V5AHXyWSgEkKyiIWOgGh829Ki1lLcaxjCVK7mJRSxjBY+zgRf/u9pXcMB7jhEZAg32EUP3O6hMKOP5Iq2sZQeHMZXt5KKMgOpcY+iHVnFyjeQKlrCBdsxge5ieAVC9vzLUelI8H+A7bKIHM10H81IGGuKvDf1ggDxVTKOV1zG3/Yia1ICG+ltD32MgNTKfP2HuW0VDKkCNrjfUTOm9i6XswwrZJkaVHeh0f2fodkrtfO6jAytqrzG+rEDDfVG1x1sprZEs5RBW4PZxeT+Bbrf5hPu9arfzKaU6WjiAFbseWvoF1GW/6vYGSmkyW7Dit4xB5QHq9Br6Xx2t9GAhtp6zkoHsfNp1J9wX6H+jeR4LtJc4LxGopZZyNpN/YcG2mw9nBTSPLizgOmjKAujGgvJID3ekD7QYi7nGzkvmQtpA38Vi7iJf0TedlC7QTVjMfcY2QyvSBPpUMW/PIBfbo9pls1XpAX2EdizeznStob3OJpQO0DB2YfE21q2GtnghpAm0Gou3T9tm6BGHQppA12HRVt17eboNlydNoLHsx2JtmL801OYcQmkC/QKLtQt9ydBW3wNpA30ci7Ur3WdolUMhbaBqNhf/8qQJ9Hkszs5wjaH9XkUobaAqtmFRdoGbDb3sWMgG6DIs5852knO82RaXer+P+qyb3eWeo7ZNBrRZvm1otY2QFdBjeHIb6hTne49Put12+9ObMoDdYmfy5UkF6AK6cCCr9aM2u9IddptcOYCG+FNDB5xLKCugO7G01TndFp/xgAntdYvrfdwVLnORt3q9Vx25F27DUjbGPxr6qxMgW6Cd2N+d6wLXedA+6nKbK73Lr/pJxzusvE/wZrvX0FOOgGyBxmF/dprXutYOj6nNdS6xyYnWp/dGcaGdhr5vDWQN9E1MXrUzfcA2j2qPj/l1J1uT9iPOeh8w1O7nCGUN9HzyGZ7ndo9qp0ucanU2r1xH+wdDu5wIeQDVVx0+/kd1i697RNv8thdn+Qz4Uv9p6DeOhHyApmBfq3OBu+3Nfd7nVELZAX3Nw4ZarYG8gG7GY1dlk6/Zm3/2Rk8jlB1QvT82dNAmQjkBVf8Mj957fdrefM7ZVhPKEuidvmDob06CXIGGbsX/bZDf8KAhfdbJhLIGmuZuQ084HHIGatiLvRvrRkP6qldbBXkAzbfD0N0OhryBGqrEMOd50FC7d1hPKGugBh8ydMh5hPIGGouI1d5lj6F1vptQ9kDvcKOhN5wMlQH0QcRGnzC03yZCeQDN9G1D6xwBFQI07FI8x02GdjgB8gJqttPQcmuhYoAumzvG7YZWejrkA1TrPYYO+SVCFQO0aM4bqj0uJJQH0LluSP7PkyeQU9QOmyAvoBm+Zegpz4LKA/qYB/wE5AXUe3m81zqoRKAPOYWcuvP9dxvqcD6h7IAKkaNU3eUlHLcI9EzS5YlAi62h/zUy89QCqqKUmvgHywsJlEHnsQYxAvXVIJo5gIhnPhiBju1iNmLvLn85Ah1ZPYs5jBGo72awEzEC9dVwHqQHI9DxWoAYgSLQQKteGIESu/qhCJTYtT+PQBEoAkWgCBSBkotAEehUWwSKQBEoAkWg/BeBIlAEikARKAJFoFmealu4gVLy1Gt5dkARKAL9BzujPSurTmu/AAAAAElFTkSuQmCC);
margin-bottom: 0.4em;
background-size: 100% auto;
}
.ath-android .ath-action-icon {
width: 1.4em;
height: 1.4em;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVmZmb///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZW6fJrAAAAEXRSTlMAAAYHG21ub8fLz9DR8/T4+RrZ9owAAAB3SURBVHja7dNLDoAgDATQWv4gKve/rEajJOJiWLgg6WzpSyB0aHqHiNj6nL1lovb4C+hYzkSNAT7mryQFAVOeGAj4CjwEtgrWXpD/uZKtwEJApXt+Vn0flzRhgNiFZQkOXY0aADQZCOCPlsZJ46Rx0jhp3IiN2wGDHhxtldrlwQAAAABJRU5ErkJggg==);
background-size: 100% auto;
}
.ath-container p {
margin: 0;
padding: 0;
position: relative;
z-index: 2147483642;
text-shadow: 0 0.1em 0 #fff;
font-size: 1.1em;
}
.ath-ios.ath-phone:after {
content: '';
background: #eee;
position: absolute;
width: 2em;
height: 2em;
bottom: -0.9em;
left: 50%;
margin-left: -1em;
-webkit-transform: scaleX(0.9) rotate(45deg);
transform: scaleX(0.9) rotate(45deg);
box-shadow: 0.2em 0.2em 0 #d1d1d1;
}
.ath-ios.ath-tablet:after {
content: '';
background: #eee;
position: absolute;
width: 2em;
height: 2em;
top: -0.9em;
left: 50%;
margin-left: -1em;
-webkit-transform: scaleX(0.9) rotate(45deg);
transform: scaleX(0.9) rotate(45deg);
z-index: 2147483641;
}
.ath-application-icon {
position: relative;
padding: 0;
border: 0;
margin: 0 auto 0.2em auto;
height: 6em;
width: 6em;
z-index: 2147483642;
}
.ath-container.ath-ios .ath-application-icon {
border-radius: 1em;
box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3), inset 0 0.07em 0 rgba(255, 255, 255, 0.5);
margin: 0 auto 0.4em auto;
}
@media only screen and (orientation: landscape) {
.ath-container.ath-phone {
width: 24em;
}
.ath-android.ath-phone {
margin-left: -12em;
}
.ath-ios.ath-phone {
margin-left: -12em;
}
.ath-ios6:after {
left: 39%;
}
.ath-ios8.ath-phone {
left: auto;
bottom: auto;
right: 0.4em;
top: 1.8em;
}
.ath-ios8.ath-phone:after {
bottom: auto;
top: -0.9em;
left: 68%;
z-index: 2147483641;
box-shadow: none;
}
}
/* Carousel-games.scss
=======================================
Author liamegan
email liam@wethecollective.com
Created 2014-07-24 14:09:51
Description
Edited by liamegan
Edited 2014-09-24 10:39:43
*/
#game-carousel,
#amiibo-carousel {
margin: 55px auto 0;
text-align: center;
padding: 0 10px;
}
#game-carousel h3,
#amiibo-carousel h3 {
margin-bottom: 16px;
}
#game-carousel .pagination,
#amiibo-carousel .pagination {
background: RGBA(0, 0, 0, 0.4);
bottom: 0px;
position: absolute;
text-align: center;
width: 100%;
}
#game-carousel .pagination > div,
#amiibo-carousel .pagination > div {
background: #fff;
border-radius: 6px;
display: inline-block;
height: 6px;
margin: 6px 3px;
overflow: hidden;
text-indent: -999em;
width: 6px;
}
#game-carousel .pagination > div.sel,
#amiibo-carousel .pagination > div.sel {
background: #00bff3;
}
@media only screen and (min-width: 43.063em) {
#game-carousel,
#amiibo-carousel {
margin-top: 72px;
}
}
/* Carousel-related.scss
=======================================
Author liamegan
email liam@wethecollective.com
Created 2014-07-24 14:09:51
Description
Edited by liamegan
Edited 2014-09-24 10:37:31
*/
#related-carousel {
background: #dfdfdf;
overflow: hidden;
padding: 10px 0px;
}
#related-carousel nav {
display: none;
}
#related-carousel .prev-spacer {
float: left;
}
#related-carousel .swipe-wrapper {
margin: 0px auto;
max-width: 1100px;
overflow: hidden;
position: relative;
}
#related-carousel .swipe-wrapper .item-wrapper {
-moz-transition: -moz-transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
-o-transition: -o-transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
transition: transform 0.8s cubic-bezier(0.28, 1.21, 0.4, 1);
overflow: hidden;
}
#related-carousel .swipe-wrapper .item-wrapper.notransition {
-moz-transition: none !important;
-o-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
}
#related-carousel .swipe-wrapper .item-wrapper .divider {
border-left: 1px solid #FFF;
border-right: 1px solid var(--colour-grey);
float: left;
height: 100%;
margin: 10px 10px;
width: 0px;
}
@media only screen and (min-width: 1100px) {
div.sizer.related-items {
width: 275px !important;
}
#related-carousel {
padding: 25px 0px;
position: relative;
}
#related-carousel nav {
height: -webkit-calc(100% - 40px);
height: calc(100% - 40px);
left: -webkit-calc(50% - 550px);
left: calc(50% - 550px);
display: block;
position: absolute;
width: 1100px;
}
#related-carousel nav a {
-moz-transition: background-color 0.2s ease-out, background-size 0.2s ease-out;
-o-transition: background-color 0.2s ease-out, background-size 0.2s ease-out;
-webkit-transition: background-color 0.2s ease-out, background-size 0.2s ease-out;
transition: background-color 0.2s ease-out, background-size 0.2s ease-out;
top: -webkit-calc(50% - 40px);
top: calc(50% - 40px);
background-color: rgba(0, 0, 0, 0.1);
background-size: 50px;
border-radius: 80px;
display: block;
height: 80px;
position: absolute;
text-indent: -999em;
width: 80px;
}
#related-carousel nav a.nav-left {
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
left: -80px;
}
#related-carousel nav a.nav-right {
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
right: -80px;
}
#related-carousel nav a:hover, #related-carousel nav a:focus {
background-color: rgba(0, 0, 0, 0.3);
background-size: 57.14286px;
}
#related-carousel::after {
content: "4";
display: none;
}
#related-carousel .swipe-wrapper {
border-left: 2px solid var(--colour-midgrey);
border-right: 2px solid var(--colour-midgrey);
}
}
/*
Flex helpters
=======================================
Author marlonmarcello
email marlon@wethecollective.com
Created 2015-10-23 15:02:04
Description .
Edited by liamegan
Edited 2015-10-23 15:02:32
*/
.listbox {
position: relative;
}
.listbox__trigger-filter {
margin-right: 8px;
}
.listbox__menu-item,
.listbox__trigger {
color: #FFF;
line-height: 1;
margin: 0;
padding: 12px 28px 12px 20px;
width: 100%;
border-radius: 34px;
border: 2px solid var(--colour-black);
box-shadow: 0 2px 0 0 var(--colour-black);
box-shadow: 0px 3px 0px black;
cursor: pointer;
text-align: left;
font-size: 1rem;
display: block;
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-bold);
line-height: 1.2em;
}
.listbox__menu-item[aria-expanded="true"],
.listbox__trigger[aria-expanded="true"] {
border-radius: 2em 2em 0 0;
}
.listbox__menu-item[aria-expanded="true"] .listbox__trigger-arrow,
.listbox__trigger[aria-expanded="true"] .listbox__trigger-arrow {
transform: rotate(-180deg);
}
.listbox__menu-item:focus,
.listbox__trigger:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.listbox__menu-item:focus:not(:focus-visible),
.listbox__trigger:focus:not(:focus-visible) {
box-shadow: none;
}
.listbox__trigger {
color: var(--colour-black);
font-size: 1rem;
align-items: center;
display: flex;
background-color: var(--colour-white);
}
.listbox__trigger-label {
background: var(--colour-black);
border-radius: 30px;
color: var(--colour-white);
padding: 12px 24px;
}
.listbox__menu {
display: none;
background: var(--colour-white);
border-radius: 0 0 2em 2em;
border: solid 2px var(--colour-black);
border-top: none;
display: none;
left: 0;
position: absolute;
top: calc(100% - 4px);
width: 100%;
z-index: 2;
}
.listbox__menu[aria-expanded="true"] {
display: block;
}
.listbox__trigger-arrow {
aspect-ratio: 22 /13;
transition: transform .2s ease-in-out;
width: 22px;
margin-left: auto;
}
.listbox__menu-item {
cursor: default;
position: relative;
border-radius: 2em;
border: none;
box-shadow: none;
padding: 0;
}
.listbox__menu-item a {
border-radius: 34px;
display: inline-block;
text-decoration: none;
color: var(--colour-black);
border: none;
padding: 12px 20px;
}
.listbox__menu-item[aria-disabled="true"]:hover, .listbox__menu-item[aria-disabled="true"]:focus {
background-color: transparent;
}
.one-love-button {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: var(--border-thickness);
--shadow-indent: 0px;
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
animation: rainbow-hover 5s infinite forwards;
display: inline-block;
background: var(--colour-white);
padding: 5px;
box-shadow: 0px 6px 0px 0px var(--colour-black);
border-radius: 2em;
font-size: 20px;
font-weight: var(--font-weight-bold);
cursor: pointer;
border: none;
}
@keyframes rainbow-hover {
0% {
background-color: #b42ff5;
}
20% {
background-color: #00d2ff;
}
40% {
background-color: #1ddb81;
}
60% {
background-color: #fff000;
}
80% {
background-color: #ee0500;
}
100% {
background-color: #b42ff5;
}
}
.one-love-button:hover, .one-love-button:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.one-love-button:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.one-love-button:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.one-love-button:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.one-love-button span {
display: block;
background-color: var(--colour-white);
padding: 20px 40px;
border-radius: 2em;
}
.one-love-button--special span {
padding: 16px 40px;
}
@media only screen and (min-width: 43.063em) {
.one-love-button, .one-love-button--special {
font-size: 24px;
}
.one-love-button span, .one-love-button--special span {
padding: 21px 40px;
}
.one-love-button--small {
font-size: 20px;
}
.one-love-button--small span {
padding: 16px 40px;
}
}
.doodle {
position: absolute;
pointer-events: none;
}
.play-home-hero {
position: relative;
overflow: hidden;
margin-bottom: 72px;
padding: 180px 0 190px;
font-weight: var(--font-weight-bold);
text-align: center;
color: var(--colour-white);
opacity: 0;
transition: opacity 0.4s ease-in;
transition-property: opacity, padding;
}
.play-home-hero.is-ready {
opacity: 1;
}
.play-home-hero.is-ready .play-home-hero__intro-footer,
.play-home-hero.is-ready .play-home-hero__intro-header,
.play-home-hero.is-ready .play-home-hero__grid-body {
opacity: 1;
transform: translateY(0px);
}
.play-home-hero.is-ready .play-home-hero__grid-body {
transition-delay: 0.2s;
}
.play-home-hero.is-ready .play-home-hero__grid-footer {
transition-delay: 0.3s;
}
.play-home-hero.is-ready .play-home-hero__decoration {
--scale: 1;
}
.play-home-hero.is-ready .play-home-hero__decoration:nth-child(1) {
--delay: 0.1s;
}
.play-home-hero.is-ready .play-home-hero__decoration:nth-child(2) {
--delay: 0.2s;
}
.play-home-hero.is-ready .play-home-hero__decoration:nth-child(3) {
--delay: 0.3s;
}
.play-home-hero.is-ready .play-home-hero__decoration:nth-child(4) {
--delay: 0.4s;
}
.play-home-hero.is-ready .play-home-hero__decoration:nth-child(5) {
--delay: 0.5s;
}
.play-home-hero.is-playing .play-home-hero__grid-footer,
.play-home-hero.is-playing .play-home-hero__grid-header, .play-home-hero.is-done .play-home-hero__grid-footer,
.play-home-hero.is-done .play-home-hero__grid-header {
transition-delay: 0s;
opacity: 0;
}
.play-home-hero.is-playing .play-home-hero__grid-body, .play-home-hero.is-done .play-home-hero__grid-body {
transition-delay: 0s;
}
.play-home-hero.is-playing .play-home-hero__video, .play-home-hero.is-done .play-home-hero__video {
padding: 0;
max-width: 100%;
width: 100%;
}
.play-home-hero.is-playing .play-home-hero__video-container-inner:hover, .play-home-hero.is-done .play-home-hero__video-container-inner:hover {
transform: translateY(0px);
}
.play-home-hero.is-playing .play-home-hero__intro-footer .play-home-hero__copy,
.play-home-hero.is-playing .play-home-hero__play-icon,
.play-home-hero.is-playing .play-home-hero__intro-header,
.play-home-hero.is-playing .play-home-hero__cover img, .play-home-hero.is-done .play-home-hero__intro-footer .play-home-hero__copy,
.play-home-hero.is-done .play-home-hero__play-icon,
.play-home-hero.is-done .play-home-hero__intro-header,
.play-home-hero.is-done .play-home-hero__cover img {
opacity: 0;
transition-delay: 0s;
}
.play-home-hero.is-playing .play-home-hero__cover {
pointer-events: none;
}
.play-home-hero.is-playing .play-home-hero__outro-footer {
display: none;
}
.play-home-hero.is-playing .play-home-hero__intro-footer {
opacity: 1;
}
.play-home-hero.is-playing .play-home-hero__intro-footer .play-home-hero__copy {
opacity: 0;
pointer-events: none;
}
.play-home-hero.is-done .play-home-hero__outro-header,
.play-home-hero.is-done .play-home-hero__outro-footer,
.play-home-hero.is-done .play-home-hero__tiles {
opacity: 1;
transform: translateY(0px);
}
.play-home-hero.is-done .play-home-hero__tiles {
pointer-events: auto;
}
.play-home-hero.is-done .play-home-hero__tiles a {
pointer-events: auto;
}
.play-home-hero.is-done .play-home-hero__intro-header,
.play-home-hero.is-done .play-home-hero__video {
opacity: 0;
}
.play-home-hero.is-skipped .play-home-hero__intro-header {
display: none;
}
.play-home-hero__background {
background-image: radial-gradient(circle at 50% 55%, #e62d18 0%, #a80b04 73%);
position: absolute;
inset: 0;
}
.play-home-hero__background::before {
animation: rotate 60s linear infinite;
aspect-ratio: 1 / 1;
content: '';
background: url("../png/background-star.2a486b788aab933a.png") center center no-repeat;
min-width: 125%;
min-height: 125%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotate {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.play-home-hero__background-wrapper {
height: 100%;
position: relative;
width: 100%;
}
.play-home-hero__decoration {
--scale: 0;
--delay: 0s;
position: absolute;
left: 0;
top: 0;
transform-origin: center;
transform: scale(var(--scale));
transition-duration: 0.6s;
transition-property: opacity, transform;
transition-timing-function: cubic-bezier(0.49, 0.24, 0.31, 1.3);
transition-delay: var(--delay);
width: 100%;
height: 100%;
}
.play-home-hero__decoration img {
position: absolute;
left: 50%;
}
.play-home-hero__decoration-tom-nook img {
width: 130px;
top: 12px;
bottom: auto;
transform: translateX(80px);
}
.play-home-hero__decoration-kirby-pylon img {
width: 84px;
top: 70px;
bottom: auto;
transform: translateX(2px);
}
.play-home-hero__decoration-isabelle img {
width: 118px;
top: 36px;
bottom: auto;
transform: translateX(-168px);
}
.play-home-hero__decoration-mario img {
width: 177px;
bottom: 12px;
top: auto;
transform: translateX(-197px);
}
.play-home-hero__decoration-bowser img {
width: 141px;
bottom: 75px;
top: auto;
transform: translateX(38px);
}
.play-home-hero__content {
align-items: start;
display: grid;
grid-template-areas: "header" "body" "footer";
justify-content: normal;
position: relative;
}
.play-home-hero__grid-header {
grid-area: header;
}
.play-home-hero__grid-body-wrapper {
grid-area: body;
display: grid;
}
.play-home-hero__grid-body-wrapper > * {
grid-column: 1;
grid-row: 1;
}
.play-home-hero__grid-footer {
padding: 8px 0;
grid-area: footer;
}
.play-home-hero__grid-body,
.play-home-hero__grid-footer,
.play-home-hero__grid-header {
height: var(--height, auto);
overflow: hidden;
opacity: 0;
transition-duration: 0.5s;
transition-property: height, opacity, transform;
transition-timing-function: cubic-bezier(0.49, 0.24, 0.37, 0.99);
transform: translateY(20px);
}
.play-home-hero__title {
font-size: 1.5rem;
line-height: 1.25;
margin: 0;
}
.play-home-hero__title span {
text-transform: uppercase;
font-size: 1.6em;
}
.play-home-hero__player {
aspect-ratio: 16 / 9;
display: block;
height: auto;
width: 100%;
}
.play-home-hero__video {
appearance: none;
background: none;
border: none;
margin: 0 auto;
max-width: 100%;
transition: width 0.5s cubic-bezier(0.49, 0.24, 0.37, 0.99);
transition-property: max-width, width, padding, height, opacity, transform;
overflow: hidden;
padding: 32px 0 24px;
max-width: 570px;
width: 100%;
}
.play-home-hero__video-container-inner {
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
transition: box-shadow 0.1s ease-in;
transition-property: transform, box-shadow;
will-change: box-shadow;
position: relative;
}
.play-home-hero__video-container-inner:hover, .play-home-hero__video-container-inner:focus-visible {
transform: translateY(calc(var(--shadow-hover) * -1));
}
.play-home-hero__video-container-inner:hover {
box-shadow: 0 calc(var(--shadow-base) + var(--shadow-hover)) 0 var(--shadow-indent) var(--shadow-color);
}
.play-home-hero__video-container-inner:active {
transform: translateY(var(--border-thickness));
box-shadow: 0 calc(var(--shadow-indent) * -1) 0 var(--shadow-indent) var(--shadow-color);
}
.play-home-hero__video-container-inner:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.play-home-hero__video-container-inner:hover .play-home-hero__play-icon {
transform: translate(-50%, -50%) scale(1.1);
}
.play-home-hero__cover {
appearance: none;
background: none;
border: none;
cursor: pointer;
display: block;
inset: 0;
position: absolute;
padding: 0;
width: 100%;
}
.play-home-hero__cover img {
transition: opacity 0.5s cubic-bezier(0.49, 0.24, 0.37, 0.99);
}
.play-home-hero__play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 57px;
height: 57px;
background: var(--colour-white);
border-radius: 50%;
transition: opacity 0.5s cubic-bezier(0.49, 0.24, 0.37, 0.99), transform 0.2s cubic-bezier(0.49, 0.24, 0.37, 0.99);
}
.play-home-hero__play-icon::after {
content: '';
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
width: 28.35px;
height: 32.4px;
background: url("../svg/icon-play-rounded.530dbecf08e3933a.svg") center center no-repeat;
background-size: cover;
}
.play-home-hero__copy {
height: var(--height, auto);
font-size: 1.25rem;
transition: opacity 0.5s ease;
transition-property: height, opacity, transform;
}
.play-home-hero__cta {
background: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 2em;
color: inherit;
cursor: pointer;
font-size: 1rem;
font-weight: var(--font-weight-normal);
padding: 8px 30px 10px;
}
.play-home-hero__cta:hover {
background: var(--colour-black);
}
.play-home-hero__tiles {
margin: 16px 0 0;
opacity: 0;
pointer-events: none;
}
.play-home-hero__tiles a {
pointer-events: none;
}
.play-home-hero__tiles .grid {
padding-left: 0;
padding-right: 0;
}
.play-home-hero__tiles,
.play-home-hero__outro-footer,
.play-home-hero__outro-header {
--height: 0px;
}
@media only screen and (min-width: 43.063em) {
.play-home-hero {
padding: 36px 0;
}
.play-home-hero.is-ready {
padding: 36px 0;
}
.play-home-hero.is-playing .play-home-hero__decoration img,
.play-home-hero.is-playing .play-home-hero__cover img,
.play-home-hero.is-playing .play-home-hero__play-icon, .play-home-hero.is-done .play-home-hero__decoration img,
.play-home-hero.is-done .play-home-hero__cover img,
.play-home-hero.is-done .play-home-hero__play-icon {
opacity: 0;
transition-delay: 0s;
}
.play-home-hero__decoration-tom-nook img {
width: auto;
top: 58px;
bottom: auto;
transform: translateX(481px);
}
.play-home-hero__decoration-kirby-pylon img {
width: auto;
top: 168px;
bottom: auto;
transform: translateX(371px);
}
.play-home-hero__decoration-isabelle img {
width: auto;
top: 36px;
bottom: auto;
transform: translateX(-545px);
}
.play-home-hero__decoration-mario img {
width: auto;
bottom: 62px;
top: auto;
transform: translateX(-642px);
}
.play-home-hero__decoration-bowser img {
width: auto;
bottom: 120px;
top: auto;
transform: translateX(254px);
}
.play-home-hero__title {
font-size: 2rem;
}
.play-home-hero__copy {
font-size: 1.75rem;
}
.play-home-hero__cta {
font-size: 1.125rem;
}
}
@media only screen and (min-width: 43.063em) {
.play-home-hero__play-icon {
width: 95px;
height: 95px;
}
.play-home-hero__play-icon::after {
width: 47.25px;
height: 54px;
background: url("../svg/icon-play.b57c6e14b129933a.svg") center center no-repeat;
background-size: cover;
}
}
@media only screen and (min-width: 77.063em) {
.play-home-hero__title {
font-size: 2.5rem;
}
}
.play-more-button {
background-image: radial-gradient(circle at 50% 53%, #81e9ff 0%, #00d2ff 100%);
padding: 96px 12px;
margin-top: 100px;
text-align: center;
position: relative;
}
.play-more-button.ng-enter {
/* standard transition code */
-moz-transition: linear 0.5s opacity;
-o-transition: linear 0.5s opacity;
-webkit-transition: linear 0.5s opacity;
transition: linear 0.5s opacity;
/* this will have a 100ms delay between each successive leave animation */
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
opacity: 0;
}
.play-more-button.ng-enter .play-more-button__decoration {
transform: scale(0);
transition: transform 1s 1s ease-in-out;
}
.play-more-button.ng-enter.ng-enter.ng-enter-active {
opacity: 1;
}
.play-more-button.ng-enter.ng-enter.ng-enter-active .play-more-button__decoration {
transform: scale(1);
}
.play-more-button.loading button {
opacity: 0;
}
.play-more-button.loading .play-more-button__icon {
opacity: 1;
}
.play-more-button__icon,
.play-more-button__cta {
position: relative;
}
.play-more-button__icon {
opacity: 0;
}
.play-more-button__icon .icon {
display: block;
margin: 0;
width: 30px;
min-width: 0;
position: absolute;
left: calc(50% - 15px);
top: 36px;
}
.play-more-button__decoration {
position: absolute;
}
.play-more-button__decoration-1 {
left: calc(50% - 120px);
top: -60px;
width: 115px;
}
.play-more-button__decoration-1 img {
transform: rotate(-24deg);
}
.play-more-button__decoration-2 {
left: calc(50% + 70px);
bottom: -10px;
width: 70px;
}
.play-more-button__decoration-2 img {
transform: rotate(27deg);
}
.play-more-button__decoration-3 {
left: calc(50% + 79px);
top: -28px;
width: 105px;
}
.play-more-button__decoration-3 img {
transform: rotate(-21deg);
}
.play-more-button__doodle-1 {
top: 55px;
left: -10px;
width: 86px;
}
.play-more-button__doodle-2 {
bottom: -30px;
left: calc(50% - 70px);
width: 154px;
}
@media only screen and (min-width: 43.063em) {
.play-more-button {
padding-bottom: 60px;
padding-top: 60px;
}
.play-more-button__doodle-1 {
top: 130px;
left: 30px;
width: 123px;
}
.play-more-button__doodle-2 {
bottom: -50px;
left: calc(50% + 30px);
width: 220px;
}
.play-more-button__decoration-1 {
left: calc(50% - 460px);
top: -35px;
width: 172px;
}
.play-more-button__decoration-2 {
left: calc(50% + 220px);
bottom: -20px;
width: 108px;
}
.play-more-button__decoration-3 {
left: calc(50% + 280px);
top: -50px;
width: 170px;
}
}
@media only screen and (min-width: 77.063em) {
.play-more-button__doodle-1 {
top: 100px;
left: calc(50% - 560px);
}
}
.play-theme-filter {
background: var(--colour-surface);
bottom: 0;
padding: 24px 0 32px;
text-align: center;
width: 100%;
position: relative;
}
.play-theme-filter__doodle-1,
.play-theme-filter__doodle-2 {
display: none;
}
.play-theme-filter__title {
text-align: center;
margin: 0 0 16px;
}
.play-theme-filter__wrapper {
overflow: auto;
scrollbar-color: var(--colour-black) var(--colour-white);
scrollbar-width: thin;
}
.play-theme-filter__wrapper::-webkit-scrollbar-track {
background-color: var(--colour-white);
border: solid 1px var(--colour-black);
}
.play-theme-filter__wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: var(--colour-white);
}
.play-theme-filter__wrapper::-webkit-scrollbar-thumb {
background-color: var(--colour-black);
}
.play-theme-filter__wrapper::-webkit-scrollbar-thumb:hover {
background-color: var(--colour-grey);
}
.play-theme-filter__list {
background-color: var(--colour-white);
display: inline-grid;
grid-auto-flow: column;
overflow: auto;
grid-auto-columns: max-content;
padding: 6px 12px;
}
.play-theme-filter__list.full-size {
border-radius: 3em;
}
.play-theme-filter__list-item {
position: relative;
margin: 0 5px 0 0;
}
.play-theme-filter__list-item:last-child {
margin-right: 0;
}
.play-theme-filter__list-item.active .play-theme-filter__button {
background-color: var(--colour-selected);
position: relative;
}
.play-theme-filter__list-item.active .play-theme-filter__button::after {
bottom: 4px;
content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='m6.453 1.238 3.063 4.594A1.437 1.437 0 0 1 8.32 8.067H2.194A1.437 1.437 0 0 1 1 5.832l3.063-4.594a1.437 1.437 0 0 1 2.391 0Z'/%3E%3C/svg%3E ");
height: 9px;
left: calc(50% - 5px);
position: absolute;
width: 10px;
}
.play-theme-filter__button {
background: transparent;
padding: 0;
border: none;
border-radius: 2em;
color: var(--colour-black);
cursor: pointer;
margin: 0;
overflow: hidden;
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
padding: 0.9em 2em;
min-height: 3em;
}
.play-theme-filter__button:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.play-theme-filter__button:focus:not(:focus-visible) {
box-shadow: none;
}
.play-theme-filter__img {
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
transition: height 0.5s ease;
background: center top no-repeat;
background-size: 60px auto;
display: block;
height: 100%;
left: 0;
position: absolute;
bottom: 0;
width: calc(100% - 10px);
z-index: 0;
}
@media only screen and (min-width: 43.063em) {
.play-theme-filter__doodle-1,
.play-theme-filter__doodle-2 {
display: block;
}
.play-theme-filter__doodle-1 {
top: -40px;
transform: rotate(42deg);
right: -62px;
width: 110px;
}
.play-theme-filter__doodle-2 {
bottom: -15px;
left: 30px;
width: 35px;
}
.play-theme-filter__list-item:not(.active) .play-theme-filter__button:hover {
box-shadow: inset 0 0 0 2px var(--colour-black);
}
}
@media only screen and (min-width: 77.063em) {
.play-theme-filter__doodle-1 {
top: -45px;
right: calc(50% - 670px);
width: 124px;
}
.play-theme-filter__doodle-2 {
bottom: -25px;
left: calc(50% - 600px);
width: 50px;
}
}
#search-main {
display: table;
margin: 0 0 0 auto;
position: relative;
}
#search-main > button {
appearance: none;
border: none;
padding: 0;
background: url("../svg/icon-search.c537c9f1796c933a.svg") center center no-repeat;
background-size: 1.5rem auto;
cursor: pointer;
width: 63px;
display: block;
margin: 0;
}
#search-main > button::after {
content: "";
display: block;
padding-bottom: 100%;
}
#search-main > button span {
position: absolute;
opacity: 0;
width: 0;
overflow: hidden;
}
#search-main > button:hover, #search-main > button:focus {
background-color: var(--colour-surface);
}
#search-main > button.selected {
background: var(--colour-surface) url("../svg/icon-close.7963c3fc5eb7933a.svg") center 53% no-repeat;
background-size: 1.5em 1.5em;
}
#searchform {
position: absolute;
right: 100%;
text-indent: 0px;
top: 0px;
height: 100%;
width: calc(100vw - 60px);
background: #fff;
display: none;
}
#searchform[aria-hidden="false"] {
display: block;
text-align: left;
}
#searchform form {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
#searchform label {
display: block;
margin: 0px;
padding: 10px 20px;
width: 100%;
}
#searchform label input {
border: solid 1px var(--colour-black);
display: block;
font-size: 1.125rem;
width: 100%;
border-radius: 2em;
padding: 4px 25px;
}
#searchform label input::placeholder {
color: var(--colour-black);
}
#searchform .suggestions {
background: #fff;
left: 0px;
position: absolute;
top: 100%;
width: 100%;
}
#searchform .suggestions ul {
list-style: none;
border-bottom: 2px solid var(--colour-lightgrey);
}
#searchform .suggestions ul li:first-child {
border-top: 1px solid var(--colour-midgrey);
}
#searchform .suggestions ul li a {
padding: 10px;
color: var(--colour-grey);
display: flex;
font-size: 0.7em;
height: 100%;
position: relative;
align-items: flex-start;
}
#searchform .suggestions ul li a img {
width: 110px;
}
#searchform .suggestions ul li a .detail {
width: -webkit-calc(100% - 120px);
width: calc(100% - 120px);
margin-left: 10px;
}
#searchform .suggestions ul li a .detail h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#searchform .suggestions ul li a .detail p.text {
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
margin-bottom: 0;
white-space: nowrap;
}
#searchform .suggestions ul li a .detail p.sub {
font-style: italic;
}
#searchform .suggestions ul li a:hover, #searchform .suggestions ul li a:focus {
background: #eee;
}
#searchform .suggestions ul li a::after {
background: var(--colour-lightgrey);
bottom: 0px;
content: " ";
display: block;
height: 2px;
left: 0px;
position: absolute;
width: 100%;
z-index: 2;
}
#searchform .suggestions ul li:last-child a::after {
display: none;
}
#searchform .tags {
background: #fff;
display: none;
padding: 10px;
}
#searchform .tags ul {
border: none;
font-size: 0.8em;
}
#searchform .tags ul li {
display: inline-block;
margin-right: 5px;
height: auto;
}
#searchform .tags ul li span {
background: var(--colour-selected);
cursor: pointer;
padding: 0 5px;
}
@media only screen and (min-width: 77.063em) {
#search-main > button {
width: 4.4rem;
height: 5.6rem;
}
#search-main > button::after {
display: none;
}
#searchform {
background: #fff url("../jpg/search-yoshi-open.bbac9189d807933a.jpg") no-repeat right bottom;
background-size: 70px auto;
}
#searchform[aria-hidden="false"]::before {
-webkit-animation: open-search-yoshi 1s 1 both;
-moz-animation: open-search-yoshi 1s 1 both;
-o-animation: open-search-yoshi 1s 1 both;
animation: open-search-yoshi 1s 1 both;
}
#searchform[aria-hidden="false"] label {
-webkit-animation: open-search-label 1s 1 both;
-moz-animation: open-search-label 1s 1 both;
-o-animation: open-search-label 1s 1 both;
animation: open-search-label 1s 1 both;
}
#searchform::before {
background: #fff url("../jpg/search-yoshi-closed.c2244036455e933a.jpg") 20px bottom no-repeat;
background-size: 50px 70px;
content: " ";
display: block;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 70px;
z-index: 10;
}
#searchform form {
display: block;
}
#searchform label {
width: -webkit-calc(100% - 70px);
width: calc(100% - 70px);
background: url("../jpg/search-yoshi-tongue.e3fea3f8b0dd933a.jpg") repeat-x left 32px;
background-size: auto 16px;
display: block;
margin: 0px 0px 0px 30px;
padding: 0px 10px 20px 50px;
position: relative;
z-index: 9;
}
#searchform label:before {
content: " ";
position: absolute;
height: 100%;
left: 0;
width: 50px;
background: url("../jpg/search-yoshi-tongue-tip.237fc34d8d7c933a.jpg") no-repeat left 32px;
background-size: auto 16px;
}
#searchform label input {
width: 95%;
}
}
/*
* Swiper
*
* Base styles.
*/
.swiper {
--colour-black: #000;
--colour-white: #fff;
--colour-lightgrey: #DADADA;
--column-size: 250px;
--gap: 20px;
position: relative;
text-align: center;
position: relative;
width: 100%;
}
.swiper__nav {
appearance: none;
background: none;
border: none;
cursor: pointer;
display: none;
text-indent: -999em;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s ease-out;
padding: 0;
position: absolute;
will-change: filter, transform;
}
.swiper__nav .icon {
transition: filter 0.2s ease-out;
}
.swiper__nav:hover:not([disabled]), .swiper__nav:focus {
transform: translateY(calc(-50% - 4px));
}
.swiper__nav:hover:not([disabled]) .icon, .swiper__nav:focus .icon {
filter: drop-shadow(0 8px 0 var(--colour-black));
}
.swiper__nav:active:not([disabled]) {
transform: translateY(calc(-50% + 4px));
}
.swiper__nav:active:not([disabled]) .icon {
filter: drop-shadow(0 0px 0 var(--colour-black));
}
.swiper__nav[hidden] {
display: none;
}
.swiper__nav[disabled="true"] {
opacity: 0.3;
}
.swiper__nav--left {
left: 15px;
}
.swiper__nav--right {
right: 15px;
}
.swiper__container {
overflow: hidden;
padding: 6px 0;
}
.swiper__list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--column-size);
margin: 0 auto;
width: max-content;
-moz-transition: -moz-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
-o-transition: -o-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
transition: transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
}
.swiper__list.notransition {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.swiper__item {
padding: 0 var(--gap);
}
.swiper__item.is-textlink {
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: inline-flex;
border: solid 2px white;
border-radius: 20px;
height: 100%;
min-height: calc(var(--column-size) - 50px);
}
.swiper__item.is-textlink .swiper__item-wraper {
text-align: center;
font-size: 13px;
font-weight: var(--font-weight-bold);
padding: 5px;
}
.swiper__item.is-textlink .swiper__item-wraper > h1,
.swiper__item.is-textlink .swiper__item-wraper h2,
.swiper__item.is-textlink .swiper__item-wraper h3,
.swiper__item.is-textlink .swiper__item-wraper h4,
.swiper__item.is-textlink .swiper__item-wraper h5,
.swiper__item.is-textlink .swiper__item-wraper h6,
.swiper__item.is-textlink .swiper__item-wraper p,
.swiper__item.is-textlink .swiper__item-wraper span {
width: 100%;
}
.swiper__item.is-textlink .swiper__item-wraper a {
text-decoration: underline;
}
.swiper__item-wraper {
display: block;
margin: 0px auto;
overflow: hidden;
text-align: left;
text-decoration: none;
}
.swiper__item-wraper p {
margin: 0;
}
.swiper__item-system {
border-left: solid 2px #ed1c24;
display: inline-block;
font-size: 0.875rem;
font-weight: 300;
padding-left: 5px;
}
.swiper__item-system[data-system="Wii U"] {
border-left-color: #00aeef;
}
.swiper__item-system[data-system="None"] {
opacity: 0;
}
.swiper__item-title {
display: block;
margin: 6px 0;
font-size: 1rem;
font-weight: var(--font-weight-bold);
text-align: center;
}
.swiper__item-title + .swiper__item-system {
margin-top: 4px;
}
/*
* Swiper variants
*
* Add here the different variations of thr swiper.
*/
.swiper--boxed {
--num-col: 3;
--column-size: 220px;
--gap: 24px;
--border-colour: var(--colour-black);
--border-thickness: 4px;
--shadow-base: calc(var(--border-thickness) * 2);
--shadow-indent: calc(var(--border-thickness) * -1);
--shadow-hover: 6px;
--shadow-color: var(--colour-black);
border: solid var(--border-thickness) var(--shadow-color);
box-shadow: 0 var(--shadow-base) 0 var(--shadow-indent) var(--shadow-color);
--shadow-base: 4px;
--border-thickness: 2px;
--shadow-indent: -2px;
position: relative;
max-width: calc(var(--column-size) * var(--num-col) + var(--border-thickness) * 2);
display: block;
margin: 0 auto;
padding: var(--gap) 0;
}
.swiper--boxed .swiper__wrapper {
overflow: hidden;
width: 100%;
}
.swiper--boxed .swiper__nav--left {
left: auto;
right: calc(100% + 16px);
}
.swiper--boxed .swiper__nav--right {
left: calc(100% + 16px);
right: auto;
}
.swiper--boxed.no-nav {
width: fit-content;
}
.swiper--round-nav .swiper__nav--left {
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.swiper--round-nav .swiper__nav--left .icon {
border-radius: 50% 0 0 50%;
}
.swiper--round-nav .swiper__nav--right {
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.swiper--round-nav .swiper__nav--right .icon {
border-radius: 0 50% 50% 0;
}
.swiper--friends {
--column-size: 170px;
}
.swiper--friends .swiper__item-img {
border: 4px solid var(--colour-white);
border-radius: 50%;
}
.swiper--products .swiper__item-img {
background-color: var(--colour-surface);
border-radius: 5px;
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}
.swiper--products .swiper__item-img::before {
content: "";
display: block;
padding-bottom: calc((9 / 16) * 100%);
}
.swiper--products .swiper__item-img img {
height: 100%;
left: 0;
object-fit: contain;
top: 0;
position: absolute;
width: 100%;
}
.swiper--amiibo {
--column-size: 150px;
}
.swiper--amiibo .swiper__item.is-textlink {
min-width: 190px;
}
.swiper--amiibo .swiper__item-img {
display: block;
margin: 0 auto;
max-width: 100%;
}
@media only screen and (min-width: 43.063em) {
.swiper__nav {
display: block;
}
.swiper__nav .icon {
min-width: 79px;
}
.swiper__container {
margin: 0 auto;
}
.swiper__item.is-textlink .swiper__item-wraper {
font-size: 17px;
}
.swiper--boxed {
--num-col: 2;
}
}
@media only screen and (min-width: 77.063em) {
.swiper--boxed {
--num-col: 3;
}
}
.playThemeRelatedBox {
position: relative;
text-align: center;
margin-top: -4.5em;
opacity: 0;
min-height: 230px;
z-index: 3;
}
.playThemeRelatedBox__doodle-1,
.playThemeRelatedBox__doodle-2 {
display: none;
}
.playThemeRelatedBox__tabs {
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: inline-flex;
background: var(--colour-white);
border-radius: 2em;
list-style: none;
margin: 0;
padding: 6px;
position: relative;
transform: translateY(50%);
z-index: 1;
}
.playThemeRelatedBox__tabs ~ .playThemeRelatedTab {
padding-top: 2em;
}
.playThemeRelatedBox__tabs ~ .playThemeRelatedTab.visible {
min-height: 292px;
}
.playThemeRelatedBox__tab {
background: transparent;
padding: 0;
border: none;
border-radius: 2em;
color: var(--colour-black);
cursor: pointer;
margin: 0 5px 0 0;
overflow: hidden;
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
padding: 0.9em 2em;
position: relative;
min-height: 3em;
}
.playThemeRelatedBox__tab.selected {
background-color: var(--colour-selected);
}
.playThemeRelatedBox__tab.selected::after {
bottom: 4px;
content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='m6.453 1.238 3.063 4.594A1.437 1.437 0 0 1 8.32 8.067H2.194A1.437 1.437 0 0 1 1 5.832l3.063-4.594a1.437 1.437 0 0 1 2.391 0Z'/%3E%3C/svg%3E ");
height: 9px;
left: calc(50% - 5px);
position: absolute;
width: 10px;
}
.playThemeRelatedBox__tab:focus {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.playThemeRelatedBox__tab:focus:not(:focus-visible) {
box-shadow: none;
}
.playThemeRelatedBox__tab:last-child {
margin-right: 0;
}
.playThemeRelatedBox__tab.Amiibo {
display: grid;
grid-template: 1fr / 1fr;
}
.playThemeRelatedBox__tab.Amiibo > * {
grid-row-start: 1;
grid-column-start: 1;
}
.playThemeRelatedBox__tab.Amiibo::before {
content: "";
display: block;
width: 90.24px;
height: 19.74px;
background: url("../png/logo-amiibo.349f7bad1158933a.png") center top/100% auto no-repeat;
grid-row-start: 1;
grid-column-start: 1;
}
.playThemeRelatedBox__tab.Amiibo span {
overflow: hidden;
text-indent: 210%;
white-space: pre;
}
@media only screen and (max-width: 43.063em) {
.playThemeRelatedBox__tab {
font-size: 1rem;
padding: 0.8em 1.45em;
}
.playThemeRelatedBox__tab.Amiibo::before {
width: 76.8px;
height: 16.8px;
}
}
@media only screen and (min-width: 43.063em) {
.playThemeRelatedBox__tab:not(.selected):hover {
box-shadow: inset 0 0 0 2px var(--colour-black);
}
.playThemeRelatedBox__doodle-1,
.playThemeRelatedBox__doodle-2 {
display: block;
}
.playThemeRelatedBox__doodle-1 {
top: 20px;
transform: rotate(42deg);
right: -84px;
width: 124px;
}
.playThemeRelatedBox__doodle-2 {
bottom: -10px;
left: 11px;
width: 50px;
}
}
@media only screen and (min-width: 77.063em) {
.playThemeRelatedBox__doodle-1 {
right: calc(50% - 670px);
}
.playThemeRelatedBox__doodle-2 {
left: calc(50% - 600px);
}
}
@media only screen and (min-width: 1440px) {
.playThemeRelatedBox__doodle-2 {
bottom: -40px;
}
}
.playThemeRelatedTab {
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
background-color: var(--colour-surface);
overflow: hidden;
display: none;
}
.playThemeRelatedTab .swiper {
padding: 16px 0;
height: 100%;
}
.playThemeRelatedTab.visible {
min-height: 240px;
display: flex;
align-items: center;
}
.flogger {
font-weight: var(--font-weight-bold);
}
.playThemeRelatedTabContent {
height: 100%;
padding: 12px 0;
}
.related-activities {
background-image: radial-gradient(circle at 50% 53%, #81e9ff 0%, #00d2ff 100%);
position: relative;
padding: 32px 0;
margin-top: 80px;
}
.related-activities .grid__item:nth-last-child(-n+3) {
display: none;
}
.related-activities__title {
text-align: center;
margin: 0 0 16px;
}
.related-activities__doodle-1 {
top: -30px;
left: -40px;
width: 121px;
}
.related-activities__doodle-2 {
bottom: -15px;
right: 5px;
width: 35px;
}
@media screen and (min-width: 520px) {
.related-activities .grid__item:nth-last-child(-n+2) {
display: block;
}
}
@media screen and (min-width: 1000px) {
.related-activities .grid {
max-width: 1179px;
}
.related-activities .grid__item:nth-last-child(-n+3) {
display: block;
}
}
@media only screen and (min-width: 43.063em) {
.related-activities {
padding: 40px 0 70px;
}
.related-activities__title {
margin-bottom: 36px;
}
.related-activities__doodle-1 {
width: 173px;
}
.related-activities__doodle-2 {
width: 50px;
}
}
@media only screen and (min-width: 77.063em) {
.related-activities__doodle-1 {
top: -55px;
left: calc(50% - 665px);
}
.related-activities__doodle-2 {
bottom: -25px;
right: calc(50% - 560px);
}
}
.playThemeRelatedBox-bk {
position: relative;
text-align: center;
top: -55px;
margin-bottom: -55px;
}
.playThemeRelatedBox-bk:not(.ng-scope) {
display: none;
}
.playThemeRelatedBox-bk .playThemeRelatedTab {
background: var(--colour-grey);
}
.playThemeRelatedBox-bk ul.tabs {
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: inline-flex;
background: var(--colour-grey);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
list-style: none;
margin: 0;
padding: 10px 5px 0px 5px;
}
.playThemeRelatedBox-bk ul.tabs li {
background: white;
border-radius: 1.1em;
color: var(--colour-grey);
display: inline-block;
margin: 0px 5px;
overflow: hidden;
}
.playThemeRelatedBox-bk ul.tabs li.Amiibo a::after {
content: '';
width: 96px;
height: 21px;
background: url("../png/logo-amiibo.349f7bad1158933a.png") center center/contain no-repeat;
display: block;
}
.playThemeRelatedBox-bk ul.tabs li.Amiibo a span {
display: none;
}
.playThemeRelatedBox-bk ul.tabs li a {
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: -ms-inline-flexbox;
display: -webkit-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-flex-align: center;
align-items: center;
height: 100%;
box-shadow: inset 0px 2px 0px RGBA(0, 0, 0, 0.3);
border-radius: 0.9em;
display: block;
font-size: 1.1em;
font-weight: normal;
padding: 10px 25px 10px;
text-decoration: none;
line-height: 1.25;
}
.playThemeRelatedBox-bk ul.tabs li a.selected, .playThemeRelatedBox-bk ul.tabs li a:hover, .playThemeRelatedBox-bk ul.tabs li a:focus {
background: #00BFF3;
box-shadow: none;
color: #FFF;
}
.playThemeRelatedBox-bk .playThemeRelatedTab {
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
overflow: hidden;
max-height: 0px;
}
.playThemeRelatedBox-bk .playThemeRelatedTab.visible {
max-height: 200px;
}
.playThemeRelatedBox-bk .playThemeRelatedTab .content {
padding: 20px 0;
}
.playThemeRelatedBox-bk .friendlist {
margin: 10px auto;
}
.playThemeRelatedBox-bk .friendlist .switcher {
height: 5rem;
position: relative;
text-align: center;
}
.playThemeRelatedBox-bk .friendlist .switcher nav .icon {
top: -webkit-calc(50% - 21px);
top: calc(50% - 21px);
background-size: contain;
display: block;
height: 42px;
overflow: hidden;
position: absolute;
text-indent: -999em;
width: 42px;
-moz-transition: -moz-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.playThemeRelatedBox-bk .friendlist .switcher nav .icon.nav-left {
left: -45px;
}
.playThemeRelatedBox-bk .friendlist .switcher nav .icon.nav-right {
right: -45px;
}
.playThemeRelatedBox-bk .friendlist .switcher nav .icon:hover, .playThemeRelatedBox-bk .friendlist .switcher nav .icon:focus {
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.playThemeRelatedBox-bk .friendlist .switcher .container {
overflow: hidden;
padding: 0;
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul {
display: inline-block;
margin: 0px;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
-moz-transition: -moz-transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
transition: transform 0.8s cubic-bezier(0.4, 0.98, 0.07, 0.98);
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul li {
display: inline-block;
width: 97px;
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul li a {
color: #FFF;
display: block;
border: 4px solid #FFF;
border-radius: 10rem;
display: block;
height: 5rem;
margin: 0px auto;
overflow: hidden;
text-align: center;
width: 5rem;
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul li a img {
max-height: 100%;
max-width: 100%;
}
.playThemeRelatedBox-bk .related-games,
.playThemeRelatedBox-bk .related-amiibo {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
.playThemeRelatedBox-bk .related-games .carousel,
.playThemeRelatedBox-bk .related-amiibo .carousel {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
text-align: center;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel {
display: inline-block;
height: 180px;
margin: 0;
padding: 0;
vertical-align: top;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel > label,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel > label,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel > label,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel > label {
display: none;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel nav a,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel nav a,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel nav a,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel nav a {
background-color: transparent;
margin: 0;
background-size: contain;
width: 42px;
height: 42px;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .box,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .box,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .box,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .box {
border: 0;
height: 100%;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .box .item,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .box .item,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .box .item,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .box .item {
height: 100%;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .swipe-wrapper,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .swipe-wrapper,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .swipe-wrapper,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .swipe-wrapper {
height: 100%;
max-width: 8.75rem;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper {
height: 100%;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper .item,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper .item,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item {
float: left;
padding: 0 0.75rem;
width: 8.75rem;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .swipe-wrapper .item-wrapper .item a:not(.system),
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item a:not(.system),
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .swipe-wrapper .item-wrapper .item a:not(.system),
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .swipe-wrapper .item-wrapper .item a:not(.system) {
padding-bottom: 115%;
width: 80%;
}
.playThemeRelatedBox-bk .related-games .carousel .title,
.playThemeRelatedBox-bk .related-amiibo .carousel .title {
display: block;
}
.playThemeRelatedBox-bk .related-games .carousel .title h3,
.playThemeRelatedBox-bk .related-amiibo .carousel .title h3 {
color: #FFF;
font-size: 1.5rem;
text-align: center;
}
.playThemeRelatedBox-bk .related-games .carousel .title h3 a,
.playThemeRelatedBox-bk .related-amiibo .carousel .title h3 a {
color: #FFF;
}
@media only screen and (max-width: 43.063em) {
.playThemeRelatedBox-bk ul.tabs li.Amiibo a::after {
width: 76.8px;
height: 16.8px;
}
.playThemeRelatedBox-bk ul.tabs li a {
padding-left: 16px;
padding-right: 16px;
box-shadow: inset 0px 2px 0px RGBA(0, 0, 0, 0.3);
font-size: 0.9em;
}
}
@media only screen and (min-width: 60em) {
.playThemeRelatedBox-bk .related-games .carousel .title,
.playThemeRelatedBox-bk .related-amiibo .carousel .title {
display: inline-block;
height: 180px;
padding-left: 20px;
position: relative;
width: 300px;
}
.playThemeRelatedBox-bk .related-games .carousel .title h3,
.playThemeRelatedBox-bk .related-amiibo .carousel .title h3 {
top: -webkit-calc(50% - 1.5em);
top: calc(50% - 1.5em);
position: absolute;
text-align: left;
}
}
@media only screen and (min-width: 43.063em) {
.playThemeRelatedBox-bk .friendlist {
display: -ms-flexbox;
display: -webkit-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-flex-pack: center;
justify-content: center;
margin: 0 auto;
max-width: 1180px;
width: 100%;
}
.playThemeRelatedBox-bk .friendlist .switcher {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 83.33333%;
width: 83.33333%;
height: auto;
}
.playThemeRelatedBox-bk .friendlist .switcher nav {
display: block;
}
.playThemeRelatedBox-bk .friendlist .switcher .container {
margin: auto;
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul li {
width: 16.666666667%;
}
.playThemeRelatedBox-bk .friendlist .switcher .container ul li a {
height: 80%;
width: 80%;
}
.playThemeRelatedBox-bk .related-games .carousel,
.playThemeRelatedBox-bk .related-amiibo .carousel {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
-ms-flex: 0 1 auto;
padding-left: 10px;
padding-right: 10px;
max-width: 83.33333%;
width: 83.33333%;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel {
padding: 0 50px;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel .swipe-wrapper,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel .swipe-wrapper,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel .swipe-wrapper,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel .swipe-wrapper {
max-width: 26.25rem;
}
.playThemeRelatedBox-bk .related-games .carousel #game-carousel nav,
.playThemeRelatedBox-bk .related-games .carousel #amiibo-carousel nav,
.playThemeRelatedBox-bk .related-amiibo .carousel #game-carousel nav,
.playThemeRelatedBox-bk .related-amiibo .carousel #amiibo-carousel nav {
left: 0px;
}
}
@media screen and (max-width: 1030px) {
.playThemeRelatedBox-bk .related-games .carousel .title,
.playThemeRelatedBox-bk .related-amiibo .carousel .title {
display: none;
}
}
@media only screen and (min-width: 43.063em) {
.page-activity-application .page-activity__activity #embedtarget {
max-width: 980px;
}
}
/*
Back to top button
=======================================
Author liamegan
email liam@wethecollective.com
Created 2014-09-02 13:11:49
Description .
Edited by liamegan
Edited 2014-09-02 13:12:11
*/
/* Errors.scss
=======================================
Author marlonmarcello
email marlon@wethecollective.com
Created 2014-09-09 15:52:09
Description
*/
.page.page-error {
text-align: center;
padding-bottom: 100px;
padding-left: 20px;
padding-right: 20px;
}
.page.page-error h1, .page.page-error h2, .page.page-error p {
color: var(--colour-grey);
}
.page.page-error > img {
margin: 60px 0;
max-width: 100%;
}
.page.page-error > h1 {
font-size: 2.2em;
margin-top: 0;
}
.page.page-error > h2 {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-normal);
line-height: 1.4;
font-size: 1.4em;
}
.page.page-error > p {
font-size: 1.1em;
margin-top: 2em;
}
.page.page-error a {
text-decoration: none;
color: #00bff3;
font-size: 1.1em;
}
.game-finder {
--color-accent-red: #EB2939;
--color-dark-red: #AA000E;
}
.game-finder .message {
text-align: center;
position: relative;
padding: 30px 0 0;
}
.game-finder .message h2.h3 {
margin: 0 0 12px;
font-size: 1.5rem;
line-height: 1.625rem;
}
.game-finder .message .description {
display: inline-block;
font-size: 1rem;
line-height: 1.5rem;
margin: 0 0 32px;
}
.game-finder .message .getStarted {
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
cursor: pointer;
background: repeating-linear-gradient(-45deg, #e60012e6, #e60012e6 5px, #e60012 5px, #e60012 10px);
border: 5px solid var(--color-dark-red);
font-size: 1.5rem;
line-height: 2rem;
color: var(--colour-white);
text-align: center;
padding: 12px 48px;
}
.game-finder .message .getStarted:hover, .game-finder .message .getStarted:focus {
background: repeating-linear-gradient(-45deg, #5a5a5a, #5a5a5a 5px, #484848 5px, #484848 10px);
border: 5px solid black;
}
.game-finder .message h3 {
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
margin: 0;
position: absolute;
top: 50%;
width: 100%;
}
.game-finder .message h3.ng-enter {
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transform: translate(-50%, -100%);
-ms-transform: translate(-50%, -100%);
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
opacity: 0;
}
.game-finder .message h3.ng-enter.ng-enter-active {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 1;
}
.game-finder .message h3.ng-leave {
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 1;
}
.game-finder .message h3.ng-leave.ng-leave-active {
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
opacity: 0;
}
.game-finder .startOver {
border: none;
background: none;
text-decoration: underline;
padding: 0;
font-size: 1rem;
margin: 0 0 32px;
}
.game-finder .filter-dropdowns {
position: relative;
width: 100%;
margin: 0 0 32px 0;
}
.game-finder .filter-dropdowns .categories-container {
height: 60px;
}
.game-finder .filter-dropdowns .categories {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-wrap: nowrap;
color: var(--colour-white);
overflow-x: auto;
overflow-y: hidden;
padding: 8px;
}
.game-finder .filter-dropdowns .categories .category {
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
background: var(--color-accent-red);
border: 2px solid var(--color-dark-red);
border-radius: 20px;
padding: 4px 48px 4px 16px;
margin-right: 12px;
}
.game-finder .filter-dropdowns .categories .category:focus-within {
outline: none;
box-shadow: 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.game-finder .filter-dropdowns .categories .category .dropdown-label {
font-size: 0.625rem;
text-transform: uppercase;
}
.game-finder .filter-dropdowns .categories .category .dropdown-arrow {
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background: url("../png/dropdown-arrow.6d399b062827.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.game-finder .filter-dropdowns .categories .category .dropdown {
border: 0;
outline: none;
appearance: none;
background: var(--color-accent-red);
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.game-finder .filter-dropdowns .categories .category .dropdown:focus {
box-shadow: none;
}
.game-finder .filter-dropdowns .categories .category .dropdown-text {
color: var(--colour-white);
font-size: 0.9375rem;
font-weight: var(--font-weight-bold);
text-transform: none;
white-space: pre;
}
.game-finder .game-filter {
-moz-transition: all 0.3s, padding-left 0.5s 0.3s;
-o-transition: all 0.3s, padding-left 0.5s 0.3s;
-webkit-transition: all 0.3s, padding-left 0.5s;
-webkit-transition-delay: 0s, 0.3s;
transition: all 0.3s, padding-left 0.5s 0.3s;
pointer-events: all;
position: relative;
width: 100%;
}
.game-finder .game-filter .questionAnswer .pagination {
display: block;
width: max-content;
background: var(--color-accent-red);
border-radius: 16px;
font-weight: var(--font-weight-bold);
font-size: 1.125rem;
color: var(--colour-white);
text-align: center;
line-height: 21px;
padding: 6px 12px;
margin: 16px auto 10px;
}
.game-finder .game-filter .questionAnswer .q1-image, .game-finder .game-filter .questionAnswer .q2-image, .game-finder .game-filter .questionAnswer .q3-image, .game-finder .game-filter .questionAnswer .q4-image {
border-top: none;
margin: 16px auto;
display: block;
}
.game-finder .game-filter .questionAnswer .q1-image {
max-width: 258px;
}
.game-finder .game-filter .questionAnswer .q2-image {
max-width: 280px;
}
.game-finder .game-filter .questionAnswer .q3-image {
max-width: 340px;
}
.game-finder .game-filter .questionAnswer .q4-image {
max-width: 236px;
}
.game-finder .game-filter .questionAnswer .question {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
line-height: 1.625rem;
margin: 0 0 12px;
}
.game-finder .game-filter .questionAnswer .questionDescription {
display: inline-block;
font-size: 1rem;
line-height: 1.5rem;
margin: 0 0 32px;
}
.game-finder .game-filter .questionAnswer .answer {
-moz-transition: all 0.5s 0.3s, max-height 0s 0s;
-o-transition: all 0.5s 0.3s, max-height 0s 0s;
-webkit-transition: all 0.5s, max-height 0s;
-webkit-transition-delay: 0.3s, 0s;
transition: all 0.5s 0.3s, max-height 0s 0s;
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
color: #575757;
font-weight: var(--font-weight-bold);
}
.game-finder .game-filter .answers {
display: none;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.game-finder .game-filter .answers .answer {
width: 100%;
margin-bottom: 16px;
}
.game-finder .game-filter .answers .answer .item {
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
display: flex;
align-items: center;
width: 100%;
background: var(--color-dark-red);
padding: 8px 54px 8px 8px;
position: relative;
}
.game-finder .game-filter .answers .answer .item:after {
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 54px;
background-color: var(--color-accent-red);
background: var(--color-accent-red) url("../png/arrow-right-white.5a583e016383.png") center no-repeat;
}
.game-finder .game-filter .answers .answer .item:hover:after {
background: #484848;
background: #484848 url("../png/arrow-right-white.5a583e016383.png") center no-repeat;
}
.game-finder .game-filter .answers .answer .item .text {
color: var(--colour-white);
display: flex;
align-items: center;
gap: 10px;
flex: 1;
font-size: 1.25rem;
line-height: 2rem;
margin-right: 16px;
}
.game-finder .game-filter .answers .answer .item .text span:last-child {
font-weight: var(--font-weight-normal);
font-size: 0.65em;
}
.game-finder .game-filter .answers .answer .item .description {
flex: 2;
font-size: 1.0625rem;
color: var(--colour-white);
font-weight: var(--font-weight-normal);
}
.game-finder .game-filter .answers .answer .item .count {
font-size: 0.9375rem;
font-weight: var(--font-weight-bold);
color: var(--colour-white);
background-color: var(--color-accent-red);
border-radius: 2em;
padding: 6px 11px;
margin: 0 8px 0 auto;
}
.game-finder .game-filter .answers .answer .item .img {
margin-right: 16px;
max-width: 120px;
background-color: var(--colour-white);
}
.game-finder .game-filter .answers .answer .item img {
border: 0;
display: block;
}
.game-finder .game-filter .answers .answer .item:hover, .game-finder .game-filter .answers .answer .item:focus {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.game-finder .game-filter .answers .answer.image-answer .item {
display: grid;
grid-template-columns: max-content 1fr;
grid-template-rows: max-content 1fr;
align-items: start;
gap: 8px;
}
.game-finder .game-filter .answers .answer.image-answer .item .img {
grid-row: 1 / -1;
margin: 0;
}
.game-finder .game-filter .answers .answer.image-answer .item .count {
grid-row: 1;
}
.game-finder .game-filter .answers .answer.image-answer .item .text {
margin-right: 8px;
}
.game-finder .game-filter .answers .answer--description .item {
display: grid;
grid-template-columns: 1fr max-content;
gap: 8px;
}
.game-finder .game-filter .answers .answer--description .item .text {
margin-right: 0;
}
.game-finder .game-filter .answers .answer--description .item .description {
grid-column: 1 / -1;
margin-right: 8px;
}
.game-finder .game-filter.current-question:not(.answered-question) {
font-size: 1.8em;
margin-bottom: 0px;
}
.game-finder .game-filter.current-question:not(.answered-question) .questionAnswer .question {
color: #484848;
}
.game-finder .game-filter.current-question:not(.answered-question) ~ * {
display: none;
}
.game-finder .game-filter.answered-question {
display: none;
}
.game-finder .game-filter.answered-question .questionAnswer .question {
font-size: 0.8em;
}
.game-finder .game-filter.answered-question .questionAnswer .answer {
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
max-height: 2em;
}
.game-finder .game-filter.answered-question .questionAnswer .answer::before {
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
opacity: 1;
}
.game-finder .game-filter.open .questionAnswer .answer {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
max-height: 0px;
}
.game-finder .game-filter.open .answers {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.game-finder label.styled-select {
-moz-transition: all 0.3s, padding-left 0.5s 0.3s;
-o-transition: all 0.3s, padding-left 0.5s 0.3s;
-webkit-transition: all 0.3s, padding-left 0.5s;
-webkit-transition-delay: 0s, 0.3s;
transition: all 0.3s, padding-left 0.5s 0.3s;
background: #bbebff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAYAAAAg0tunAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJGNzVBOEE4QTgzMTFFNjkwMTY5RkE0QjYzNTc3MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJGNzVBOEI4QTgzMTFFNjkwMTY5RkE0QjYzNTc3MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNDJENEQ4OThBODAxMUU2OTAxNjlGQTRCNjM1NzcxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNDJENEQ4QThBODAxMUU2OTAxNjlGQTRCNjM1NzcxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PutRgbQAAAIWSURBVHja7JlNKERRGIbnRBby0ywshLLAQpFINjYUs7FTspKUHRu2Y6FslIUoysLGblhYTYqVhYRSWCglwgbJT1n4O95TJ3PnmpnznevOzLnufPU0SuZ838M5576GBWzFOe/GSz5jLBrIUqGHPLzMgwf0EbZ9L2BsoblG8ATewUCWeigAER6rIbtAk7A2VgGueHyNZVheEdi09SB+mSGjBeKLYnDIE9c0YBmQVwb2kvTwDJqMFCjOG7DBU9eyPJfSJa8KnCp6uAaVJgpc4rRaB4VpkFcv5VBq30SBM5xe26DURXlt4J64trjcOk09A8c1JB6BchfkhcArcc070GL6LTwIPogDnYOaP8jrB2/EtS5ArfGPMbK5Ho2/ilvQ7EDeKPgirnEsLg5PPAdaGmwHjxrnUoeGvEmNo2IHBBO8h9kCZZMN4IY4qNiKvapoBhY05EWT3fieECgbrQZnxIE/wTAxmqlqRfxMir68IdCSDg40hp8gRLNUNatKPZ4SKBsuAVsaEuaEBEU0S1Rh4jnqLYGWbbiqIWONEM2U2//fCLRcBIvc3VJeQP9GoMNHEWU0c7C+twXKIUbk1nNaP9HMlwLlIH0acSxpNPOtQDlMF3jRkPcrmvlaoByoVW5JR9HM9wLlUHXg0kk0ywmMDSb+3X6iG81yAuOHC8qtSo5mXhfo+qdtcqtGwC5jbCoN72/UZ+nfAgwANLZLQ4e54IYAAAAASUVORK5CYII=") right center no-repeat;
background-size: 40px 13px;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
display: block;
font-size: 1.2em;
overflow: hidden;
margin-bottom: 8px;
max-height: 100px;
padding: 0.2em;
position: relative;
width: 100%;
}
.game-finder label.styled-select::before {
-moz-transition: all 0.5s 0.3s;
-o-transition: all 0.5s 0.3s;
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.3s;
transition: all 0.5s 0.3s;
-moz-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAYAAAAkjjtxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJGNzVBOEU4QTgzMTFFNjkwMTY5RkE0QjYzNTc3MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJGNzVBOEY4QTgzMTFFNjkwMTY5RkE0QjYzNTc3MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkY3NUE4QzhBODMxMUU2OTAxNjlGQTRCNjM1NzcxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkY3NUE4RDhBODMxMUU2OTAxNjlGQTRCNjM1NzcxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg5zrSkAAAN+SURBVHjazJhdSBVBFMfnrBoUVBQFgT5EVi9FjwU+xFXDgj4ospcK34I+yAgCMSwQrYQouFL21CcYEQkVfamhSSXkY/p4jR4UojQooqDA6X/unb3uzp3du/d7F849szO7M7975syZOUsihFfHaHQD1H3I4XM1p8adbVYIYdeSEP0oboKMdI5Gt4QWmGGh3kghKlXVMpSHUb8tdMCwZBUJGoBUak0LIS8AvZ9vKCSWrWLLQqp9HpuDHCkLAexK9lXIOvK3YLzZCgHsEGQ930vhnnRy4/fj7gCVEHYp1DvIxgCPD0N2IcT9tkoIO2CCpVSnGLFhS7LoOt5HFxOJ15j+zZR0A89rDNIA2B92RXmRLbsI6gnD2j6bsKg0gY+hpaHNAVtUCyvYZ5BahpQetlVWn4CKwLKzent5kWAXQD0ETK1QsCZ3UP47gd+6tprmWVNflqFzglTnbwfrZthHkJ3SMflm+8pJSD1gv3n1Z+mwUD34+YhyXR622zIA9oJut1ckcJQn8Sci8Nmvfn3qFr4OOYoX2d9eAXpvDm4AWHEPxUZ9pdguIeYtPqV8dipdv5ZjgC6oY465qoD0ob4pC1jmuQU56L/Txn+neSEGgU0CdyZgW+weyN1+FwAnM4TtgTR5bQqOQPZFJiwbC9q/hQHapQ2bnKaUVdGN584H7DPuVqbYqS24GbUpxDKZPQudrTIFYyKnReKldkBfVRb0WmQJt0qNq/o1gx7r9PQnELBMLLLL3Ctpg8xbJBnmT0Nu8oIyuEKXPlMe108OcQhd49ksZnJYpxUDXnT7mzQGd9T28YKChf6qd89CXZDBYNkNPmQbfUizEk/nNdOGom+neHEQdxz2miGXvKbf8d4fyHbAvs0ltpNhag9B3cZAFW5A4/7/GbLaL2g5YPmIOJTrZkQeoWkP1AOVALrDR5ocxuAW/9hnATuYj62efOIpTlXiMR5ZIoXMtn+GbQTs03ydTSjNJsDn1ueQFX5W1KbfDodzuN+XT9i03yUwGJ/4IwCYdm0qdgqbjCXueIIywzblGzbwAR6WXqNysCDHTv5+wLC9hThbB0pCMfgnqK2JwzV5/mulTxQKNuMUCZZeDvVSqJzMEEGOA/ZGIbOXjNJ8wHyHqoeVh1MsTeJMoWGz+hgIqF9YUDtQdC6oVtRfKUZ+mHXWrA5AdyAxwLYXK/v+L8AASNFHtz9Jp70AAAAASUVORK5CYII=");
background-size: 100%;
content: "";
display: block;
height: 16px;
left: 0.4em;
opacity: 0;
position: absolute;
top: 50%;
width: 22px;
}
.game-finder label.styled-select span {
background: transparent;
color: #3a404b;
border: none;
height: 2em;
line-height: 2em;
margin-top: -0.3em;
outline: none;
padding: 5px;
-webkit-appearance: none;
}
.game-finder label.styled-select select {
background: transparent;
border: none;
font-size: 15px;
height: 110%;
line-height: 4em;
margin-top: -0.3em;
outline: none;
padding: 5px;
position: absolute;
-webkit-appearance: none;
color: transparent;
opacity: 0;
width: 100%;
left: 0px;
top: 0px;
}
.game-finder label.styled-select select:focus {
opacity: 1;
}
.game-finder label.styled-select.current-question:not(.answered-question) {
font-size: 1.8em;
margin-bottom: 0px;
}
.game-finder label.styled-select.current-question:not(.answered-question) span {
color: var(--colour-white);
}
.game-finder label.styled-select.answered-question::before {
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
opacity: 1;
}
.game-finder label.styled-select.ng-enter, .game-finder label.styled-select.ng-move, .game-finder label.styled-select.ng-leave.ng-leave-active {
border-bottom-width: 0px;
opacity: 0;
max-height: 0px;
margin-bottom: 0;
padding: 0;
}
.game-finder label.styled-select.ng-leave, .game-finder label.styled-select.ng-move.ng-move-active, .game-finder label.styled-select.ng-enter.ng-enter-active {
border-bottom-width: 2px;
opacity: 1;
max-height: 100px;
margin-bottom: 8px;
padding: 0.2em;
}
.game-finder label.styled-select.ng-leave-stagger, .game-finder label.styled-select.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
/* in case the stagger doesn't work then these two values
must be set to 0 to avoid an accidental CSS inheritance */
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.game-finder .game-list .introduction {
position: relative;
text-align: right;
}
.game-finder .game-list .introduction .text {
background: #ffe46a;
border-radius: 2em;
margin: 0px 70px;
font-size: 30px;
padding: 1em;
position: absolute;
top: 90px;
text-align: center;
z-index: 1;
}
.game-finder .game-list .introduction .text p {
margin-right: 300px;
margin-top: 50px;
}
.game-finder .game-list .introduction .mario {
background: url("../png/mario-ponder-large-1.911fcfe7d423933a.png");
height: 691px;
background-size: contain;
display: inline-block;
margin: 40px 80px 24px 0;
position: relative;
width: 301px;
z-index: 2;
}
.game-finder .game-list .introduction .arrow {
background: url("../png/arrow-large-1.b488e2c285bd933a.png");
background-size: contain;
display: inline-block;
height: 128px;
left: 50%;
margin: 30px 0 0 -210px;
position: absolute;
width: 127px;
z-index: 4;
}
.game-finder .game-list .introduction.ng-enter {
transition: 0.5s linear all;
opacity: 0;
}
.game-finder .game-list .introduction.ng-enter.ng-enter-active {
opacity: 1;
}
.game-finder .game-list .introduction.ng-leave {
transition: 0.5s linear all;
opacity: 1;
}
.game-finder .game-list .introduction.ng-leave.ng-leave-active {
opacity: 0;
}
.game-finder .game-list h3.game-list__title {
font-size: 1.5rem;
line-height: 1.625rem;
margin: 18px 0 12px;
}
.game-finder .game-list span.game-list__description {
display: block;
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: 16px;
}
.game-finder .game-list ul.game-list__list {
list-style-type: none;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
}
.game-finder .game-list ul.game-list__list .game {
position: relative;
border: 1px solid #CDCDCD;
background: #F4F4F4;
padding-bottom: 48px;
}
.game-finder .game-list ul.game-list__list .game:hover .cta {
background: #484848;
}
.game-finder .game-list ul.game-list__list .gamelink {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 10px;
}
.game-finder .game-list ul.game-list__list .gamelink .img {
display: flex;
justify-content: center;
height: 187px;
background: #D6D6D6;
}
.game-finder .game-list ul.game-list__list .gamelink .img img {
height: 100%;
width: auto;
}
.game-finder .game-list ul.game-list__list .gamelink .game-title-price {
display: flex;
justify-content: space-between;
font-size: 1.25rem;
line-height: 1.5rem;
margin: 8px 0;
}
.game-finder .game-list ul.game-list__list .gamelink .game-title-price h4 {
font-size: 1.25rem;
line-height: 1.5rem;
margin: 0;
}
.game-finder .game-list ul.game-list__list .gamelink .game-title-price .price {
display: flex;
align-items: flex-start;
margin: 0 0 0 8px;
white-space: nowrap;
font-weight: var(--font-weight-bold);
}
.game-finder .game-list ul.game-list__list .gamelink .game-title-price .price span {
display: inline-block;
font-size: 0.5rem;
line-height: 1rem;
}
.game-finder .game-list ul.game-list__list .gamelink .esrb {
font-size: 0.875rem;
line-height: 1.375rem;
font-style: italic;
}
.game-finder .game-list ul.game-list__list .cta {
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
display: block;
font-weight: var(--font-weight-bold);
font-size: 1.125rem;
line-height: 2rem;
background: var(--color-accent-red);
color: var(--colour-white);
padding: 8px 0;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.game-finder .game-list ul.game-list__list .cta:after {
content: '';
display: inline-block;
height: 12px;
width: 12px;
background: transparent url("../png/arrow-right-white.5a583e016383.png") center no-repeat;
background-size: contain;
}
.game-finder .game-list ul.game-list__list.ng-enter {
transition: 0.5s linear all;
opacity: 0;
}
.game-finder .game-list ul.game-list__list.ng-enter.ng-enter-active {
opacity: 1;
}
.game-finder .game-list ul.game-list__list > li {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.game-finder .game-list ul.game-list__list > li.ng-enter, .game-finder .game-list ul.game-list__list > li.ng-move, .game-finder .game-list ul.game-list__list > li.ng-leave.ng-leave-active {
opacity: 0;
max-height: 1px;
}
.game-finder .game-list ul.game-list__list > li.ng-leave, .game-finder .game-list ul.game-list__list > li.ng-move.ng-move-active, .game-finder .game-list ul.game-list__list > li.ng-enter.ng-enter-active {
opacity: 1;
max-height: 500px;
}
.game-finder .game-list ul.game-list__list > li.ng-leave-stagger, .game-finder .game-list ul.game-list__list > li.ng-enter-stagger, .game-finder .game-list ul.game-list__list > li.ng-move-stagger {
/* this will have a 100ms delay between each successive leave animation */
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
/* in case the stagger doesn't work then these two values
must be set to 0 to avoid an accidental CSS inheritance */
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.game-finder .mario-group {
width: 100%;
max-width: 568px;
max-height: 407.75px;
overflow: hidden;
margin: 40px auto 40px;
}
.game-finder .mario-group .img {
width: 100%;
padding-top: 71.7861%;
background-size: contain;
background: url("../png/mario-group.4a91dec5c744.png");
background-size: contain;
background-repeat: no-repeat;
}
.game-finder .more-games {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background: url("../png/stripes.a03010ed19ac.png");
background-size: cover;
background-repeat: repeat-x;
padding: 24px 12px 24px;
}
.game-finder .more-games a {
color: var(--colour-white);
font-size: 1.25rem;
line-height: 1.5rem;
}
@media only screen and (max-width: 43em) {
.game-finder .game-list ul.game-list__list {
grid-template-columns: 1fr;
}
.game-finder .game-list .introduction {
text-align: center;
}
.game-finder .game-list .introduction .arrow {
width: 100%;
height: 70px;
margin-left: 0;
left: 0px;
background-repeat: no-repeat;
background-position: center;
}
.game-finder .game-list .introduction .mario {
background-repeat: no-repeat;
margin: -5px 0 0 70px;
height: 390px;
position: relative;
width: 170px;
}
.game-finder .game-list .introduction .text {
position: relative;
font-size: 20px;
margin: 0;
top: 60px;
}
.game-finder .game-list .introduction .text p {
margin: 40px 10px 50px;
}
.game-finder .game-list > ul > li {
display: block;
}
.game-finder .game-list > ul > li .game-desc {
margin: 0;
}
}
@media only screen and (min-width: 43.063em) {
.game-finder .startOver {
font-size: 1.5rem;
}
.game-finder .message {
padding: 30px 30px 0;
text-align: left;
}
.game-finder .message h2.h3 {
font-size: 2.25rem;
line-height: 2.5rem;
}
.game-finder .message .description {
font-size: 1.5rem;
line-height: 2rem;
}
.game-finder .filter-dropdowns {
width: calc(100% - 22px);
margin: 0 0 32px 32px;
}
.game-finder .game-filter {
padding: 0 32px;
}
.game-finder .game-filter .questionAnswer .pagination {
border-radius: 24px;
font-size: 1.5rem;
line-height: 1.5rem;
padding: 12px 24px;
margin: 22px auto 16px;
}
.game-finder .game-filter .questionAnswer .q1-image, .game-finder .game-filter .questionAnswer .q2-image, .game-finder .game-filter .questionAnswer .q3-image, .game-finder .game-filter .questionAnswer .q4-image {
margin: 32px auto;
}
.game-finder .game-filter .questionAnswer .q1-image {
max-width: 620px;
}
.game-finder .game-filter .questionAnswer .q2-image {
max-width: 436px;
}
.game-finder .game-filter .questionAnswer .q3-image {
max-width: 350px;
}
.game-finder .game-filter .questionAnswer .q4-image {
max-width: 448px;
}
.game-finder .game-filter .questionAnswer .question {
font-size: 2.25rem;
line-height: 2.5rem;
}
.game-finder .game-filter .questionAnswer .questionDescription {
font-size: 1.5rem;
line-height: 1.625rem;
}
.game-finder .game-filter .questionAnswer .answer {
padding-left: 25px;
}
.game-finder .game-filter .questionAnswer .answer::before {
-moz-transition: all 0.5s 0.3s;
-o-transition: all 0.5s 0.3s;
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.3s;
transition: all 0.5s 0.3s;
-moz-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAYAAAAkjjtxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJGNzVBOEU4QTgzMTFFNjkwMTY5RkE0QjYzNTc3MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJGNzVBOEY4QTgzMTFFNjkwMTY5RkE0QjYzNTc3MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkY3NUE4QzhBODMxMUU2OTAxNjlGQTRCNjM1NzcxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkY3NUE4RDhBODMxMUU2OTAxNjlGQTRCNjM1NzcxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg5zrSkAAAN+SURBVHjazJhdSBVBFMfnrBoUVBQFgT5EVi9FjwU+xFXDgj4ospcK34I+yAgCMSwQrYQouFL21CcYEQkVfamhSSXkY/p4jR4UojQooqDA6X/unb3uzp3du/d7F849szO7M7975syZOUsihFfHaHQD1H3I4XM1p8adbVYIYdeSEP0oboKMdI5Gt4QWmGGh3kghKlXVMpSHUb8tdMCwZBUJGoBUak0LIS8AvZ9vKCSWrWLLQqp9HpuDHCkLAexK9lXIOvK3YLzZCgHsEGQ930vhnnRy4/fj7gCVEHYp1DvIxgCPD0N2IcT9tkoIO2CCpVSnGLFhS7LoOt5HFxOJ15j+zZR0A89rDNIA2B92RXmRLbsI6gnD2j6bsKg0gY+hpaHNAVtUCyvYZ5BahpQetlVWn4CKwLKzent5kWAXQD0ETK1QsCZ3UP47gd+6tprmWVNflqFzglTnbwfrZthHkJ3SMflm+8pJSD1gv3n1Z+mwUD34+YhyXR622zIA9oJut1ckcJQn8Sci8Nmvfn3qFr4OOYoX2d9eAXpvDm4AWHEPxUZ9pdguIeYtPqV8dipdv5ZjgC6oY465qoD0ob4pC1jmuQU56L/Txn+neSEGgU0CdyZgW+weyN1+FwAnM4TtgTR5bQqOQPZFJiwbC9q/hQHapQ2bnKaUVdGN584H7DPuVqbYqS24GbUpxDKZPQudrTIFYyKnReKldkBfVRb0WmQJt0qNq/o1gx7r9PQnELBMLLLL3Ctpg8xbJBnmT0Nu8oIyuEKXPlMe108OcQhd49ksZnJYpxUDXnT7mzQGd9T28YKChf6qd89CXZDBYNkNPmQbfUizEk/nNdOGom+neHEQdxz2miGXvKbf8d4fyHbAvs0ltpNhag9B3cZAFW5A4/7/GbLaL2g5YPmIOJTrZkQeoWkP1AOVALrDR5ocxuAW/9hnATuYj62efOIpTlXiMR5ZIoXMtn+GbQTs03ydTSjNJsDn1ueQFX5W1KbfDodzuN+XT9i03yUwGJ/4IwCYdm0qdgqbjCXueIIywzblGzbwAR6WXqNysCDHTv5+wLC9hThbB0pCMfgnqK2JwzV5/mulTxQKNuMUCZZeDvVSqJzMEEGOA/ZGIbOXjNJ8wHyHqoeVh1MsTeJMoWGz+hgIqF9YUDtQdC6oVtRfKUZ+mHXWrA5AdyAxwLYXK/v+L8AASNFHtz9Jp70AAAAASUVORK5CYII=");
background-size: 100%;
content: "";
display: block;
height: 16px;
left: 0;
opacity: 0;
position: absolute;
top: 50%;
width: 22px;
}
.game-finder .game-filter .answers .answer .item {
padding: 16px 54px 16px 16px;
}
.game-finder .game-filter .answers .answer .item .text {
font-size: 1.625rem;
}
.game-finder .game-filter .answers .answer .item .count {
margin-right: 16px;
padding: 0.8em 1.005em;
}
.game-finder .game-filter .answers .answer .item .img {
margin-right: 32px;
max-width: 158px;
}
.game-finder .game-filter .answers .answer.image-answer .item {
display: flex;
align-items: center;
gap: 16px;
}
.game-finder .game-filter .answers .answer.image-answer .item .text {
margin-right: 0;
}
.game-finder .game-filter .answers .answer--description .item {
display: flex;
gap: 16px;
}
.game-finder .game-filter .answers .answer--description .item .text {
flex: 1;
}
.game-finder .game-filter .answers .answer--description .item .description {
flex: 2;
}
.game-finder .game-filter .answers .answer--description .item .count {
order: 2;
}
.game-finder .game-list .startOver {
padding: 0 32px;
}
.game-finder .game-list ul.game-list__list {
padding: 0 32px;
}
.game-finder .mario-group {
margin: 48px auto 48px;
}
.game-finder .game-list h3.game-list__title {
font-size: 2.25rem;
line-height: 2.5rem;
margin: 45px 0 16px;
padding: 0 32px;
}
.game-finder .game-list span.game-list__description {
font-size: 1.5rem;
line-height: 2rem;
padding: 0 32px;
}
}
@media only screen and (min-width: 77.063em) {
.game-finder .more-games {
padding: 36px 12px 32px;
}
.game-finder .more-games a {
font-size: 1.5rem;
line-height: 2.75rem;
}
}
.parents-body {
background: var(--colour-white);
color: var(--colour-grey);
}
.page--parents h1,
.page--parents .h1,
.page--parents h2,
.page--parents .h2,
.page--parents h3,
.page--parents .h3,
.page--parents h4,
.page--parents .h4 {
font-family: "museo-sans", sans-serif;
font-weight: var(--font-weight-normal);
line-height: 1.4;
font-weight: 300;
margin: 1em 0;
}
.page--parents h3,
.page--parents .h3,
.page--parents h4,
.page--parents .h4 {
font-weight: var(--font-weight-bold);
margin: 0.8em 0;
}
.page--parents .parents-post :not(img):not(div):not(span):not(a) img,
.page--parents .parents-post .copy img {
border-top: 0;
}
.page--parents .content-area p:not(.h2):not(.h3):not(.legaltext) {
font-size: 1em;
}
.page--parents .page-header {
background: var(--colour-surface);
padding: 2.5rem;
}
.page--parents .page-header .page-title {
margin: 0;
}
.page--parents .page-title {
text-align: center;
color: #5f89bb;
font-size: 3rem;
margin: 0;
}
.page--parents .page-center {
padding: 0 10px;
}
.page--parents #parents-nav__toggler {
display: none;
}
.page--parents #parents-nav__toggler:checked ~ .parents-nav__item--label span::after {
transform: rotate(0deg);
}
.page--parents #parents-nav__toggler:checked ~ .parents-nav__list {
display: block;
}
.page--parents .parents-nav__list {
display: none;
}
.page--parents .parents-nav__item {
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
display: block;
font-size: 1.5em;
font-weight: 300;
margin-bottom: 0.5em;
text-decoration: none;
padding-left: 16px;
}
.page--parents .parents-nav__item span {
background: var(--colour-lightgrey);
display: flex;
padding: 22px 17px;
align-items: center;
justify-content: space-between;
}
.page--parents .parents-nav__item span::after {
content: "";
display: inline-block;
width: 26px;
height: 16px;
background: url("../svg/icon-chevron.2081071894d7933a.svg") -22px -83px no-repeat;
transform: rotate(-90deg) translateX(-10px);
opacity: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.page--parents .parents-nav__item:hover span::after, .page--parents .parents-nav__item:focus span::after {
transform: rotate(-90deg) translateX(0px);
opacity: 1;
}
.page--parents .parents-nav__item:focus {
outline: none;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 2px var(--colour-grey), 0px 0px 0px 6px #ffba00;
}
.page--parents .parents-nav__item:focus:not(:focus-visible) {
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
}
.page--parents .parents-nav__item--active {
display: none;
}
.page--parents .parents-nav__item--label {
font-weight: 600;
}
.page--parents .parents-nav__item--label span::after {
transform: rotate(-90deg);
opacity: 1;
}
.page--parents .page-content {
overflow: hidden;
background: white;
border: solid 1px #c5c5c5;
padding: 10px;
position: relative;
}
.page--parents .parents-post img {
border-top: solid 3px var(--colour-grey);
}
.page--parents .page-footer {
background: var(--colour-surface);
padding: 20px;
margin: 20px 0 140px;
}
.page--parents .page-footer .page-footer__title {
margin-top: 0;
}
.page--parents .page-footer__title {
color: #5f89bb;
text-align: center;
font-weight: 300;
}
.page--parents .page-footer__social {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.page--parents .page-footer__social li {
width: calc(100% / 3 - 10px);
margin: 0 10px 10px;
}
.page--parents .page-footer__social a {
display: block;
text-align: center;
}
.page--parents .parents-list li {
border-bottom: 2px solid #ccc;
margin: 1em 0;
padding-bottom: 1em;
}
.page--parents .parents-list li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.page--parents .parents-list__item {
display: flex;
text-decoration: none;
}
.page--parents .parents-list__item-img {
width: 30%;
}
.page--parents .parents-list__item-copy {
width: 70%;
}
.page--parents .parents-post--list .parents-post__title {
margin-top: 0;
}
.page--parents .parents-list__item-copy {
padding-left: 10px;
}
.page--parents .parents-list__item-title {
font-weight: var(--font-weight-bold);
font-size: 1.4em;
margin-bottom: 1em;
}
.page--parents .parents-list__item-more {
text-decoration: underline;
}
@media only screen and (min-width: 43.063em) {
.page--parents .page-footer__social li {
width: calc(100% / 6 - 10px);
margin: 0 10px;
}
}
@media only screen and (min-width: 60em) {
.page--parents .page-center {
margin: 0 auto;
max-width: 1180px;
}
.page--parents .content-wrapper {
display: flex;
}
.page--parents .page-aside {
width: 30%;
padding-right: 20px;
}
.page--parents .page-content {
width: 70%;
}
.page--parents .parents-nav__list {
display: block;
}
.page--parents .parents-nav__item--active {
display: block;
font-weight: 600;
}
.page--parents .parents-nav__item--active span::after {
opacity: 1;
transform: rotate(-90deg) translateX(0);
}
.page--parents .parents-nav__item--label {
display: none;
}
.page--parents .page-footer {
width: 70%;
margin-left: auto;
margin-right: 0;
}
.page--parents .page-footer__social li {
width: calc(100% / 6 - 10px);
margin: 0 10px;
}
.page--parents .parents-list__item-copy {
padding-left: 20px;
}
}
@media only screen and (min-width: 77.063em) {
.page--parents .page-footer__social {
justify-content: center;
}
.page--parents .page-footer__social li {
width: calc(100% / 10);
margin: 0 10px;
}
}
/*
Surprises
=======================================
Author liamegan
email liam@wethecollective.com
Created 2014-08-31 15:12:14
Description .
Edited by liamegan
Edited 2014-08-31 15:28:23
*/
#surprise-overlay {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 99999;
}
#surprise-overlay img {
left: 0px;
position: absolute;
top: 100px;
width: 100%;
}
/*# sourceMappingURL=screen.css.map */