@charset "utf-8";
@import url('https://fonts.cdnfonts.com/css/impact');
@import url('https://fonts.cdnfonts.com/css/georgia');
@import url('https://fonts.cdnfonts.com/css/Copperplate');
@import url('https://fonts.cdnfonts.com/css/Papyrus');
@import url('https://fonts.cdnfonts.com/css/Garamond');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
:root {
	--main-colour: #0062c8;
	--secondary-1: #53c7a6;
    --secondary-2: #89d6c2;
    --secondary-3: #274686;
    --secondary-4: #2475ec;
    --secondary-5: #ed475b;
    --secondary-6: #fb7e30;
    --secondary-7: #f9b223;
    --secondary-8: #f9e433;
	--main-colour-trans: rgba(225, 10, 10, .5);
	--white: #fff;
	--logo-bg-time: .5s;
	--logo-intro-time: 0.5s;
	--logo-wait-time: 1.5s;
	--font-h1: 3vh;
	--font-h2: 2.5vh;
	--font: 2vh;
}

/*======================COMMON RULES=====================*/
html, body, body * {margin: 0; padding: 0;}
html, body, #overlay, #content{overflow-x: hidden; overflow-x: clip; width: 100%; }
body{background-color: var(--main-colour); color: white; font-family: "Nunito Sans", sans-serif; font-optical-sizing: none; font-weight: 400; font-size: calc(10px + .2vw);}
body * {transition: all .3s ease-in-out; font-family: Arial, Helvetica, sans-serif;}
h1, h2{text-transform: uppercase; margin: 1vh 0;}
h1, h3{font-weight: 600;}
h1, h2, p{text-align: center;}
h1{font-size: calc(12px + .2vw); border-bottom: 1px white solid; width: 100%;}
h2{font-weight: 300; font-style: italic; font-size: calc(11px + .2vw);}
ul, ol{padding-left: 2vw; margin-bottom: .5vh;}
#content, section, .icon, #overlay{display: flex;}
section, #title .sectionContent{width: 90vw; position: relative;}
section{justify-content: center; align-items: center;}
main{animation: appear .5s ease-in-out 2s both; overflow-y: hidden; overflow-y: clip;}
img{width: 100%; height: auto; display: block; object-fit: contain;}
p{text-align: justify; text-justify: inter-character; margin-bottom: .5vh;}
p.alignLeft{text-align: left;}
ul{list-style: url("../images/jpj-logo-star.svg"); margin-bottom: .5vh;}
#overlay{position: fixed; top: 0; left: 0; overflow-y: hidden; overflow-y: clip; height: 100vh; animation: appear .5s ease-in-out 2s reverse both;}
#jpjLogo{width: 60%; height: auto;}
#jpj-logo-a-circle, #jpj-logo-p-circle, #jpj-logo-o-1-circle, #jpj-logo-o-2-circle{animation: jpjLogoZoomIn .5s ease-in-out both;}
#jpj-logo-a-circle{transform-origin: 14% 56%; animation-delay: .8s;}
#jpj-logo-p-circle{transform-origin: 45% 56%; animation-delay: .9s;}
#jpj-logo-o-1-circle{transform-origin: 56% 56%; animation-delay: 1s;}
#jpj-logo-o-2-circle{transform-origin: 83% 56%; animation-delay: 1.3s;}
#def{width: 0; height: 0;}
.fillBlack{fill: black;}
.fillWhite{fill: #fff;}
.fillMainBlue{fill: var(--main-colour);}
.fillGreen{fill: var(--secondary-2);}
.fillDarkGreen{fill: var(--secondary-1);}
.fillDarkBlue{fill: var(--secondary-3);}
.fillLightBlue{fill: var(--secondary-4);}
.fillRed{fill: var(--secondary-5);}
.fillOrange{fill: var(--secondary-6);}
.fillLightOrange{fill: var(--secondary-7);}
.fillYellow{fill: var(--secondary-8);}
.bgMainBlue{background-color: var(--main-colour);}
.bgGreen{background-color: var(--secondary-2);}
.bgDarkGreen{background-color: var(--secondary-1);}
.bgDarkBlue{background-color: var(--secondary-3);}
.bgLightBlue{background-color: var(--secondary-4);}
.bgRed{background-color: var(--secondary-5);}
.bgOrange{background-color: var(--secondary-6);}
.bgLightOrange{background-color: var(--secondary-7);}
.bgYellow{background-color: var(--secondary-8);}
#content, #title{align-items: center; justify-content: center;}
#content, #title{flex-direction: column;}
#content{position: absolute; top: 0; left: 0; padding-bottom: 2vh;}
#title, #topBar{width: 100%;}
#topBar{top: 0; left: 0; display: grid;}
.icon, #overlay{justify-content: center; align-items: center; align-content: center;}
.icon svg{max-width: 70%; max-height: 70%;}
#intro{margin-top: 2vh;}
#intro .sectionContent, #objectives .sectionContent, #designAproach .sectionContent, #brandDecisions .sectionContent, #technicalImplementation .sectionContent, #outcome .sectionContent{display: grid; grid-auto-rows: auto; row-gap: 0; align-items: center; align-content: center;}
#title .sectionContent p{text-transform: uppercase; font-weight: 900; font-size: calc(16px + 2vw);}
.line{width: 100%; height: 5vh; background-color: var(--main-colour); background-image: url("../images/jpj-joy-pattern.svg"); background-repeat:repeat-x; background-size: contain; animation: joyBG 2s linear infinite;}
.rtl{animation-direction: reverse;}
.sticker{display: block; position: absolute; z-index: 100; height: auto;}
.logo{width: 100%; height: auto; margin: 2vh 0;}
.image{margin: 2vh 0;}
.sticker{width: 15vw; top: auto; left: auto;}
#v1-laptop{translate: 6% 0;}
.bingo, .clover-petals, .clover-pistil{--os: 0deg; --ts: 360deg; animation: rotateAni 5s linear infinite;}
.bingo{transform-origin: 50% 50%;}
.clover-petals, .clover-pistil{transform-origin: 50% 44%;}
.bell > svg, .bell-clapper{--os: -15deg; --ts: 15deg; animation: rotateAni 3s ease-in-out alternate infinite; transform-origin: 90% 0%;}
.sevenTop, .sevenBtm{--os: -10deg; --ts: 10deg; animation: rotateAni 4s ease-in-out alternate infinite; transform-origin: 50% 100%;}
.bar > svg, .cherries > svg, .cherries-leaf{--os: -5deg; --ts: 5deg; animation: rotateAni 2s ease-in-out alternate infinite;}
.bar > svg{transform-origin: 50% 50%;}
.cherries > svg, .cherries-leaf{transform-origin: 54% 12%;}
.anticlockwise{animation-direction: reverse;}
.anticlockwiseAlternate{animation-direction: alternate-reverse;}
.bingo:nth-of-type(1), .clover:nth-of-type(1) > svg .clover-petals, .clover:nth-of-type(1) > svg .clover-pistil{animation-duration: 5.1s;}
.bingo:nth-of-type(2){animation-duration: 5.2s;}
.bingo:nth-of-type(3), .clover:nth-of-type(2) > svg .clover-petals, .clover:nth-of-type(2) > svg .clover-pistil{animation-duration: 5.3s;}
.bingo:nth-of-type(4){animation-duration: 5.4s;}
.bingo:nth-of-type(5), .clover:nth-of-type(3) > svg .clover-petals, .clover:nth-of-type(3) > svg .clover-pistil{animation-duration: 5.5s;}
.bingo:nth-of-type(6){animation-duration: 5.6s;}
.bingo:nth-of-type(7), .clover:nth-of-type(4) > svg .clover-petals, .clover:nth-of-type(4) > svg .clover-pistil{animation-duration: 5.7s;}
.bingo:nth-of-type(8){animation-duration: 5.8s;}
.bingo:nth-of-type(9), .clover:nth-of-type(5) > svg .clover-petals, .clover:nth-of-type(5) > svg .clover-pistil{animation-duration: 5.9s;}
.bell:nth-of-type(1) > svg, .bell:nth-of-type(1) > svg .bell-clapper{animation-duration: 3.5s;}
.bell:nth-of-type(2) > svg, .bell:nth-of-type(2) > svg .bell-clapper{animation-duration: 4s;}
.bell:nth-of-type(3) > svg, .bell:nth-of-type(3) > svg .bell-clapper{animation-duration: 4.5s;}
.mainText{margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; row-gap: 0; align-content: center;}
#technicalImplementation .sectionContent .mainText:nth-of-type(1), #outcome .sectionContent .mainText:nth-of-type(1){display: flex; flex-direction: column;}
	#resList, #resultList, #performList{align-self: center;}
.footage{margin-top: 2vh;}

/*========================================*/


/*========================================*/


@media only screen and (orientation : portrait){
	body{font-size: calc(12px + .3vw);}
	h1{font-size: calc(15px + .3vw); margin: 1vh 0;}
	h2{font-size: calc(13px + .3vw); margin: 1vh 0;}
	p{margin-bottom: 1vh;}
	.image{justify-self: center; width: 80vw;}
	#topBar{height: calc(100vw / 4 * 3 * 0.8); grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);}
	#logo-ver{display: block;}
	#logo-hor{display: none;}
	#cloverGreen, #barYellow, #bellYellow{width: 13vw;}
	#bingoYellow-03, #bingoYellow-15, #bingoYellow-29{width: 14vw;}
	#cherriesYellow, #bingoYellow-33, #bingoGreen-15{width: 15vw;}
	#bingoGreen-45, #bingoGreen-29, #bingoGreen-33{width: 16vw;}
	#bingoYellow-45, #bellGreen, #barGreen{width: 17vw;}
	#cloverYellow, #sevenGreen{width: 18vw;}
	#sevenYellow{width: 19vw;}
	#bingoGreen-03{width: 20vw;}
	#cherriesYellow{bottom: 5vh; right: -2vw;}
	#bingoGreen-03{bottom: 30vh; left: -10vw;}
	#cloverGreen{top:-6vh; left: -6vw;}
	#bingoYellow-45{bottom: 5vh; right: -5vw;}
	#bingoYellow-33{bottom: 11vh; left: -2vh;}
	#bingoGreen-45{left: 80vw; bottom: -2vh;}
	#bellGreen{right: 2vw; bottom: 40vh;}
	#bingoGreen-29{left: -3vw; bottom: 23vh;}
	#bingoYellow-03{right: -2vw; bottom: 6vh;}
	#barYellow{left: 2vw; bottom: -0.5vh;}
	#bingoYellow-15{left: 1vw; bottom: 10vh;}
	#bingoGreen-33{right: 2vw; bottom: 1vh;}
	#cloverYellow{right: -1vw; bottom: 40vh;}
	#bingoYellow-29{left: -1vw; bottom: 11vh;}
	#barGreen{right: -2vw; bottom: 2vh;}
	#sevenGreen{right: -1vw; bottom: 42vh;}
	#sevenYellow{left: -1vw; bottom: 20vh;}
	#bingoGreen-15{left: -3vw; bottom: -1vh;}
	#bellYellow{right: -2vw; bottom: 8vh;}
	.mainText{margin: 0 0 1vh 0;}
}
@media only screen and (orientation : portrait) and (min-width: 360px){
	#topBar{height: calc(100vw / 6 * 2 * 0.8); grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr);}
	section, #title .sectionContent{width: 80vw;}
	#cloverGreen, #barYellow, #bellYellow{width: 10vw;}
	#bingoYellow-03, #bingoYellow-15, #bingoYellow-29{width: 10.5vw;}
	#cherriesYellow, #bingoYellow-33, #bingoGreen-15{width: 11vw;}
	#bingoGreen-45, #bingoGreen-29, #bingoGreen-33{width: 11.5vw;}
	#bingoYellow-45, #bellGreen, #barGreen{width: 12vw;}
	#cloverYellow, #sevenGreen{width: 12.5vw;}
	#sevenYellow{width: 13vw;}
	#bingoGreen-03{width: 13.5vw; bottom: 38vh; left: -10vw;}
	#cloverGreen{top:-5vh; left: -9vw;}
	#bellGreen{right: 2vw; bottom: 32vh;}
	#bingoGreen-29{left: -3vw; bottom: 20vh;}
	#bingoYellow-03{right: -2vw; bottom: 9vh;}
	#cloverYellow{right: -5vw; bottom: 35vh;}
	#bingoYellow-29{left: -4vw; bottom: 20vh;}
	#barGreen{right: -2vw; bottom: -1vh;}
	#sevenGreen{right: -1vw; bottom: 35vh;}
	#sevenYellow{left: -1vw; bottom: 25vh;}
	#bellYellow{right: -2vw; bottom: 18vh;}
}
@media only screen and (orientation : portrait) and (min-width: 600px){
	body{font-size: calc(12px + .5vw);}
	h1{font-size: calc(15px + .5vw); margin: 1vh 0;}
	h2{font-size: calc(13px + .5vw); margin: 1vh 0;}
	.image{width: 60vw;}
	#fotageIcons{column-gap: 1.5vw; row-gap: 1.5vw;}
	#myRoles{columns: 2;}
	#jpjValues, #resList{columns: 3;}
}
@media only screen and (orientation : landscape){
	body{font-size: calc(12px + .2vw);}
	h1{font-size: calc(17px + .2vw);}
	h2{font-size: calc(15px + .2vw);}
	#topBar{height: calc(100vw / 12 * 0.8); grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(1, 1fr);}
	#logo-hor{display: block;}
	#logo-ver{display: none;}
	section .sectionContent{grid-column-gap: 5vw;}
	.sectionContent{justify-content: space-between; align-items: center;}
	#objectives .sectionContent .image, #brandDecisions .sectionContent .image, #outcome .sectionContent .image{grid-column: 1;}
	#intro .sectionContent .image,  #designAproach .sectionContent .image, #technicalImplementation .sectionContent .image, #objectives .sectionContent .mainText, #brandDecisions .sectionContent .mainText{grid-column: 2;}
	#cloverGreen, #barYellow, #bellYellow{width: 6.5vw;}
	#bingoYellow-03, #bingoYellow-15, #bingoYellow-29{width: 7vw;}
	#cherriesYellow, #bingoYellow-33, #bingoGreen-29, #bingoGreen-15{width: 7.5vw;}
	#bingoGreen-45, #bingoGreen-33{width: 8vw;}
	#bingoYellow-45, #bellGreen, #barGreen{width: 8.5vw;}
	#cloverYellow{width: 9vw;}
	#sevenYellow{width: 9.5vw;}
	#bingoGreen-03, #sevenGreen{width: 10vw;}
	#cherriesYellow{bottom: 5vh; right: -2vw;}
	#bingoGreen-03{bottom: 5vh; right: -3vw;}
	#bingoYellow-45{top: -5vh; left: -8vw;}
	#bingoGreen-45{left: -2vw; top: 15vh;}
	#bellGreen{left: 40vw; bottom: 5vh;}
	#bingoGreen-29{left: -8vw; top: 16vh;}
	#bingoYellow-03{right: -7vw; top: 20vh;}
	#barYellow{left: 37vw; bottom: 5vh;}
	#bingoYellow-15{left: -6vw; bottom: 15vh;}
	#bingoGreen-33{right: -10vw; bottom: 11vh;}
	#bingoYellow-33{top: 5vh; right: -7vh;}
	#cloverYellow{left: 40vw;}
	#bingoYellow-29{left: 40vw;}
	#barGreen{left: -7vw; top: -2vh;}
	#sevenGreen{right: -2vw; bottom: 12vh;}
	#sevenYellow{left: -1vw; top: 2vh;}
	#bingoGreen-15{left: -6vw; bottom: -1vh;}
	#bellYellow{left: 40vw; top: 5vh;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
	#objectives .sectionContent .mainText:nth-of-type(1), #brandDecisions .sectionContent .mainText:nth-of-type(2){display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1){
	#objectives .sectionContent, #brandDecisions .sectionContent, #outcome .sectionContent {grid-template-columns: 50vw 35vw;}
	#intro .sectionContent,  #designAproach .sectionContent, #technicalImplementation .sectionContent{grid-template-columns: 35vw 50vw;}
	#intro .sectionContent .mainText:nth-of-type(1), #objectives .sectionContent .mainText:nth-of-type(1), #designAproach .sectionContent .mainText:nth-of-type(1), #designAproach .sectionContent  .mainText:nth-of-type(1), #brandDecisions .sectionContent .mainText:nth-of-type(1), #technicalImplementation .sectionContent .mainText:nth-of-type(1), #outcome .sectionContent .mainText:nth-of-type(1), #outcome .sectionContent .mainText:nth-of-type(3), #outcome .sectionContent .mainText:nth-of-type(4){grid-column: 1/3;}
	#intro .sectionContent .image{grid-row: 2/4;}
	#objectives .sectionContent .image{grid-row: 2/4;}
	#technicalImplementation .sectionContent .image{grid-row: 2/4;}
	#brandDecisions .sectionContent .image{grid-row: 2;}
	#outcome .sectionContent .image{grid-row: 2/3;}
	#objectives .sectionContent .mainText:nth-of-type(1), #objectives .sectionContent .mainText:nth-of-type(2), #outcome .sectionContent .mainText:nth-of-type(4){display: flex; justify-content: center; align-items: center; flex-direction: column;}
	#intro .sectionContent .mainText:nth-of-type(1), #brandDecisions .sectionContent .mainText:nth-of-type(1), #objectives .sectionContent .mainText:nth-of-type(2), #technicalImplementation .sectionContent .mainText:nth-of-type(1){align-self: end;}
	#intro .sectionContent .mainText:nth-of-type(3), #brandDecisions .sectionContent .mainText:nth-of-type(2), #objectives .sectionContent .mainText:nth-of-type(3), #technicalImplementation .sectionContent .mainText:nth-of-type(3){align-self: start;}
	#cloverGreen{top: 15vh; left: 35vw;}
	#cloverYellow{top: 20vh;}
	#bellYellow{top: 50vh;}
	#sevenYellow{top: 30vh;}
	#bingoYellow-29{top: 21vh;}
	#myRoles{columns: 2;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3){
	#objectives .sectionContent, #brandDecisions .sectionContent, #outcome .sectionContent{grid-template-columns: 45vw 40vw;}
	#intro .sectionContent,  #designAproach .sectionContent, #technicalImplementation .sectionContent{grid-template-columns: 40vw 45vw;}
	#objectives .sectionContent .mainText:nth-of-type(1), #designAproach .sectionContent .mainText:nth-of-type(1), #designAproach .sectionContent  .mainText:nth-of-type(1), #outcome .sectionContent .mainText:nth-of-type(1), #outcome .sectionContent .mainText:nth-of-type(3), #outcome .sectionContent .mainText:nth-of-type(4){grid-column: 1/3;}
	#intro .sectionContent .mainText:nth-of-type(1), #technicalImplementation .sectionContent .mainText:nth-of-type(1){grid-column: 1;}
	#brandDecisions .sectionContent .mainText:nth-of-type(1){grid-column: 2;}
	#intro .sectionContent .image, #technicalImplementation .sectionContent .image{grid-row: 1/4;}
	#objectives .sectionContent .image{grid-row: 2/4;}
	#brandDecisions .sectionContent .image{grid-row: 1/3;}
	#outcome .sectionContent .image{grid-row: 2/3;}
	#intro .sectionContent .mainText:nth-of-type(1), #brandDecisions .sectionContent .mainText:nth-of-type(1), #objectives .sectionContent .mainText:nth-of-type(2), #technicalImplementation .sectionContent .mainText:nth-of-type(1){align-self: end;}
	#intro .sectionContent .mainText:nth-of-type(3), #brandDecisions .sectionContent .mainText:nth-of-type(2), #objectives .sectionContent .mainText:nth-of-type(3), #technicalImplementation .sectionContent .mainText:nth-of-type(3){align-self: start;}
	#bingoGreen-03{right: -9vw;}
	#cloverGreen{top: 5vh; left: 40vw;}
	#cloverYellow{top: 5vh;}
	#bingoYellow-45{left: -8vw;}
	#bellGreen{left: 35vw;}
	#bingoGreen-29{left: -8vw;}
	#bingoYellow-29{top: 11vh;}
	#bingoYellow-03{right: -2vw;}
	#bingoYellow-33{top: -1vh;}
	#barYellow{left: 42vw;}
	#barGreen{left: -5vw;}
	#jpjValues, #resList{columns: 3;}
	
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (min-width: 1250px){
	#objectives .sectionContent .mainText:nth-of-type(1), #outcome .sectionContent .mainText:nth-of-type(3), #outcome .sectionContent .mainText:nth-of-type(4){grid-column: 2;}
	#objectives .sectionContent .image{grid-row: 1/4;}
	#outcome .sectionContent .image{grid-row: 2/5;}
	#outcome .sectionContent .mainText:nth-of-type(2){align-self: end;}
	#outcome .sectionContent .mainText:nth-of-type(4){align-self: start;}
}
/*@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (min-width: 1024px) and (hover: hover) and (pointer: fine){
	#objectives{margin-top: -10vh;}
}*/
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9) and (max-width: 900px){
	.image{width: 70vw; justify-self: center;}
	.mainText, #intro .sectionContent .image, #objectives .sectionContent .image, #designAproach .sectionContent .image, #brandDecisions .sectionContent .image, #brandDecisions .sectionContent .mainText:nth-of-type(2), #technicalImplementation .sectionContent .image, #outcome .sectionContent .image{grid-column: 1/ 3;}
	#brandDecisions .sectionContent .image{grid-row: 3;}
	#intro .sectionContent .image, #objectives .sectionContent .image, #technicalImplementation .sectionContent .image{grid-row: 4;}
	#outcome .sectionContent .image{grid-row: 5;}
	#cloverGreen, #bellYellow{width: 8.5vw;}
	#bingoYellow-03, #bingoYellow-15, #bingoYellow-29{width: 9vw;}
	#cherriesYellow, #bingoYellow-33, #bingoGreen-29, #bingoGreen-15{width: 9.5vw;}
	#bingoGreen-45, #bingoGreen-33{width: 10vw;}
	#bingoYellow-45, #bellGreen, #barGreen{width: 10.5vw;}
	#cloverYellow{width: 11vw;}
	#sevenYellow, #barYellow{width: 11.5vw;}
	#bingoGreen-03, #sevenGreen{width: 12vw;}
	#cloverGreen{left: -9vw;}
	#bingoYellow-45, #bingoGreen-45, #bingoGreen-29, #bingoYellow-29, #bingoYellow-03, #cloverYellow, #barGreen, #sevenYellow, #bellYellow{top: auto;}
	#bingoYellow-45, #bingoGreen-45, #cloverYellow{bottom: 120vh;}
	#bellGreen{left: 70vw;}
	#bellYellow{left: 80vw; bottom: 60vh;}
	#bingoGreen-29{bottom: 80vh;}
	#bingoYellow-03{bottom: 10vh;}
	#barYellow{left: 5vw; bottom: 10vh;}
	#bingoYellow-29{bottom: 110vh; left: 75vw;}
	#barGreen{bottom: 15vh;}
	#bingoYellow-15{left: 5vw;}
	#sevenYellow{bottom: 80vh;}
	#myRoles{columns: 2;}
	#jpjValues, #resList{columns: 3;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9) and (min-width: 900px){
	section{width: 90vw;}
	h1{margin: 5vh 0 2vh 0;}
	h2{margin: 1vh 0;}
	#objectives .sectionContent, #brandDecisions .sectionContent, #outcome .sectionContent{grid-template-columns: 45vw 40vw;}
	#intro .sectionContent,  #designAproach .sectionContent, #technicalImplementation .sectionContent{grid-template-columns: 40vw 45vw;}
	#cloverGreen{left: -7vw;}
	#bingoYellow-33{right: -15vh;}
	#bingoGreen-33{right: -8vw;}
	#bellGreen{left: 30vw;}
	#bingoGreen-29{left: 80vw; top: auto; bottom: 40vh;}
	#bingoYellow-29{top: auto; bottom: 70vh;}
	#barYellow{left: 42vw; bottom: 15vh;}
	#barGreen{top: 14vh; left: -9vw;}
	#cloverYellow{left: 30vw;}
	#bellYellow{left: 35vw;}
	#bingoYellow-45{top: auto; bottom: 68vh; left: 40vw;}
	#bingoGreen-45{top: 50vh; left: -3vw;}
	#bingoYellow-03{left: -7vw;}
	#bingoGreen-03{right: -4vw;}
	#bingoYellow-15{bottom: 45vh;}
	#sevenYellow{top: 30vh;}

}
@keyframes clipping{0%{height: 0;} 100%{height: auto;}}
@keyframes appear{0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes joyBG{0%{background-position: 0 50%;} 100%{background-position: calc(466 / (240 / 5vh)) 50%;}}
@keyframes rotateAni{from{transform: rotate(var(--os));} to{transform: rotate(var(--ts));}}
@keyframes jpjLogoZoomIn{from{transform: scale(0);} to{transform: scale(1);}}
/*==============================*/