@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: #e10a0a;
	--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, #content{overflow-x: hidden; overflow-x: clip; max-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, #userFlow span:nth-of-type(1){text-transform: uppercase;}
h1, h2{margin: 1vh 0;}
h1, h2, p{text-align: center;}
h1, h3, #userFlow span:nth-of-type(2){font-weight: 600;}
h1{font-size: calc(12px + .2vw); border-bottom: 1px white solid; width: 100%;}
h2, #userFlow span:nth-of-type(1){font-weight: 300; font-style: italic; font-size: calc(11px + .2vw);}
ul, ol{padding-left: 2vw; margin-bottom: .5vh;}
p{text-align: justify; text-justify: inter-character; margin-bottom: .5vh;}
section{width: 90vw; position: relative; }
main{animation: appear .5s ease-in-out 1.9s both;}
#def{width: 0; height: 0;}
.fillWhite{fill: #fff;}
.fillRed{fill: var(--main-colour);}
.fillBlack{fill: black;}
#overlay, #vgnLogo, .diamond{transform-origin: 50% 50%; left: 50%;}
#overlay, #vgnLogo, .diamond{position: fixed; top: 50%;}
#overlay{width: 100%; height: 100%; transform: translate(-50%, -50%);}
.diamond{width: 200px; height: 250px; filter: drop-shadow(5px 5px 10px rgba(50, 50, 0, 0.3)); animation: diamondZoomIn var(--logo-bg-time) 0.5s ease-in-out 2 alternate both; transform: translate(-50%, -50%) scale(var(--os));}
#vgnLogo{width: 202px; height: 315px; /* margin-top: -101px; margin-left: -157.5px; */ transform: translate(-50%, -33%) scale(var(--os)); z-index: 99; display: flex; flex-direction: column; align-content: space-between; align-items: center; justify-content: space-between; animation: vgnLogo .5s ease-in-out var(--logo-wait-time) both;}
.diamond div{width: 100%; height: 100%;}
#diamond_01{z-index: 89; animation-delay: 0.7s;}
#diamond_02{z-index: 90; animation-delay: 0.65s;}
#diamond_03{z-index: 91; animation-delay: 0.6s;}
#diamond_04{z-index: 92; animation-delay: 0.55s;}
#diamond_05{z-index: 93; animation-delay: 0.5s;}
#logoMain{width: 200px; height: 250px; animation: logoDiamondSpin var(--logo-intro-time) ease-in-out both;}
#logoVirginShape{animation: logoVirginSpinHide var(--logo-intro-time) ease-in-out both;}
#logoGames{width: 202px; height: 39px; transform-origin: 50% 50%; animation: gamesAni 1s cubic-bezier(0,1.93,.52,-0.29) var(--logo-intro-time) both;}
#content, #title .sectionContent{display: flex; flex-direction: column; align-items: center;}
#content{position: absolute; padding: 2vh 0; row-gap: 1vh; width: 100%; top: 0; left: 0;}
#title, .sectionContent{width: 100%;}
#title .sectionContent{row-gap: 3vh;}
.line{width: 100vw; height: 1px; background-color: white;}
.logo{ height: auto;}
#logo-ver, #logo-hor{height: auto;}
#overview .sectionContent, #designApproach .sectionContent, #visulRefinements .sectionContent, #outcome .sectionContent{display: grid; grid-auto-rows: auto; row-gap: 0; align-items: center;}
#visulRefinements .sectionContent .image{justify-self: center;}

#fotageIcons{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0; padding: 2vh 0 0 0;}
.footageIcon{cursor: pointer; pointer-events: auto;}
.icon{display: block; position: absolute; z-index: 100; height: auto; top: auto; left: auto;}
.clapper, .cherryLeaf, .cherryL, .cherryR{animation: swingAni 1s ease-in-out alternate infinite;}
.clapper{--or: -15deg; --tr: 15deg; transform-origin: 50% 0%;}
.cherryLeaf{--or: 0deg; --tr: 3deg; transform-origin: 15% 15%;}
.cherryL{--or: -5deg; --tr: 1deg; transform-origin: 95% 15%;}
.cherryR{--or: -2deg; --tr: 8deg; transform-origin: 75% 0%;}
.iconDiamond{animation: appear 1s ease-in-out alternate infinite;}
.delay1{animation-delay: .1s;}
.delay2{animation-delay: .2s;}
.delay3{animation-delay: .3s;}
.delay4{animation-delay: .4s;}
.delay5{animation-delay: .5s;}
.delay6{animation-delay: .6s;}
.image{justify-self: center;}
.footageIcon svg, .icon svg{width: 100%; height: 100%;}
.footageRed {fill: var(--main-colour);}
.footageWhite {fill: #fff;}
svg:hover .footageRed {fill: #fff;}
svg:hover .footageWhite {fill: var(--main-colour);}
#newDesign, #oldDesign{display: grid;}
#newTermsMask, #newTermsFullPage, #oldTermsFullPage, #oldTermsMask{grid-area: 1 / 1;}
#newTermsFullPage, #oldTermsFullPage{z-index: 2;}
#oldTermsMask, #newTermsMask{z-index: 3;}
.image img{width: 100%; height: auto; display: block; object-fit: contain;}
#newTermsFullPage{width: 37.6%; height: 51.7%; transform: translate(94.7%, 36%) rotate(17deg); background-image: url("../images/vgn-terms-fullPage.png"); background-image: -webkit-image-set(url("../images/vgn-terms-fullPage.avif") 1x, url("../images/vgn-terms-fullPage.webp") 1x, url("../images/vgn-terms-fullPage.png")  1x); background-image: image-set(url("../images/vgn-terms-fullPage.avif") 1x, url("../images/vgn-terms-fullPage.webp") 1x, url("../images/vgn-terms-fullPage.png")  1x); background-size: cover; background-position: center top; animation: bgani 10s linear alternate infinite;}
#oldTermsFullPage{width: 81.48%; height: 41.5%; transform: translate(11.5%, 75.4%); background-image: url("../images/vgn-terms-old-fullPage.png"); background-image: -webkit-image-set(url("../images/vgn-terms-old-fullPage.avif") 1x, url("../images/vgn-terms-old-fullPage.webp") 1x, url("../images/vgn-terms-old-fullPage.png")  1x); background-image: image-set(url("../images/vgn-terms-old-fullPage.avif") 1x, url("../images/vgn-terms-old-fullPage.webp") 1x, url("../images/vgn-terms-old-fullPage.png")  1x); background-size: cover; background-position: center top; animation: bgani 5s linear alternate infinite;}
#bingoWhite-1, #bingoRed-88, #bingoRed-14, #bingoWhite-26, #bingoRed-32{animation: swingAni 30s linear infinite; --or: 0deg; --tr: 360deg;}
#bellWhite, #bellRed, #tripleSevenRed, #tripleSevenWhite, #sevenRed, #sevenWhite, #poundRed, #poundWhite{animation: swingAni 2s ease-in-out alternate infinite; --or: -5deg; --tr: 5deg;}
#bellWhite, #bellRed{transform-origin: 50% 0%; --or: 15deg; --tr: -15deg; animation-duration: 1s;}
#bingoWhite-1{rotate: 45deg;}
#cherryWhite{rotate: 5deg;}
#bellWhite, #bingoRed-32{rotate: -25deg;}
#tripleSevenRed, #sevenRed, #poundRed{rotate: 10deg;}
#bellRed{rotate: -35deg;}
#poundWhite{rotate: -10deg;}
#bingoRed-88{rotate: 5deg;}
#bingoRed-14{rotate: -5deg;}
#bingoWhite-26{rotate: 55deg;}
#cherryRed{rotate: -45deg;}
#sevenWhite{rotate: -15deg;}
#tripleSevenWhite{rotate: -30deg;}


@media (min-width: 320px){
	.diamond, #vgnLogo{--os: 0.84;}
	#diamond_01{--ts: 5.28;}
	#diamond_02{--ts: 4.39;}
	#diamond_03{--ts: 3.5;}
	#diamond_04{--ts: 2.62;}
	#diamond_05{--ts: 1.73;}
	#logo-ver{width: 40vw;}}
@media (min-width: 375px){
	.diamond, #vgnLogo{--os: 0.96;}
	#diamond_01{--ts: 6.36;}
	#diamond_02{--ts: 5.28;}
	#diamond_03{--ts: 4.2;}
	#diamond_04{--ts: 3.12;}
	#diamond_05{--ts: 2.04;}
	#logo-ver{width: 25vw;}}
@media (min-width: 414px){
	.diamond, #vgnLogo{--os: 1.2;}
	#diamond_01{--ts: 9;}
	#diamond_02{--ts: 7.44;}
	#diamond_03{--ts: 5.88;}
	#diamond_04{--ts: 4.32;}
	#diamond_05{--ts: 2.76;}
	#logo-hor{width: 30vw;}}
@media (min-width: 1024px){
	.diamond, #vgnLogo{--os: 1.44;}
	#diamond_01{--ts: 10.2;}
	#diamond_02{--ts: 8.45;}
	#diamond_03{--ts: 6.7;}
	#diamond_04{--ts: 4.94;}
	#diamond_05{--ts: 3.19;}}
@media (min-width: 1280px){
	#diamond_01{--ts: 12;}
	#diamond_02{--ts: 9.89;}
	#diamond_03{--ts: 7.78;}
	#diamond_04{--ts: 5.66;}
	#diamond_05{--ts: 3.55;}}
@media (min-width: 1600px){
	.diamond, #vgnLogo{--os: 1.8;}
	#diamond_01{--ts: 14.4;}
	#diamond_02{--ts: 11.88;}
	#diamond_03{--ts: 9.36;}
	#diamond_04{--ts: 6.84;}
	#diamond_05{--ts: 4.32;}}
@media (min-width: 1920px){
	.diamond, #vgnLogo{--os: 2.16;}
	#diamond_01{--ts: 16.8;}
	#diamond_02{--ts: 13.87;}
	#diamond_03{--ts: 10.94;}
	#diamond_04{--ts: 8.02;}
	#diamond_05{--ts: 5.09;}}
@media (min-width: 2560px){
	.diamond, #vgnLogo{--os: 2.64;}
	#diamond_01{--ts: 22.8;}
	#diamond_02{--ts: 18.77;}
	#diamond_03{--ts: 14.74;}
	#diamond_04{--ts: 10.7;}
	#diamond_05{--ts: 6.67;}}
@media (min-width: 3440px){
	.diamond, #vgnLogo{--os: 3;}
	#diamond_01{--ts: 28.8;}
	#diamond_02{--ts: 23.64;}
	#diamond_03{--ts: 18.48;}
	#diamond_04{--ts: 13.32;}
	#diamond_05{--ts: 8.16;}}
@media (min-width: 3840px){
	.diamond, #vgnLogo{--os: 4.2;}
	#diamond_01{--ts: 34.8;}
	#diamond_02{--ts: 28.68;}
	#diamond_03{--ts: 22.56;}
	#diamond_04{--ts: 16.44;}
	#diamond_05{--ts: 10.32;}}
@media (min-width: 5120px){
	.diamond, #vgnLogo{--os: 4.8;}
	#diamond_01{--ts: 45.6;}
	#diamond_02{--ts: 37.44;}
	#diamond_03{--ts: 29.28;}
	#diamond_04{--ts: 21.12;}
	#diamond_05{--ts: 12.96;}}
@media (min-width: 6016px){
	.diamond, #vgnLogo{--os: 6;}
	#diamond_01{--ts: 54;}
	#diamond_02{--ts: 44.4;}
	#diamond_03{--ts: 34.8;}
	#diamond_04{--ts: 25.2;}
	#diamond_05{--ts: 15.6;}}
@media (min-width: 7680px){
	.diamond, #vgnLogo{--os: 8.4;}
	#diamond_01{--ts: 68.4;}
	#diamond_02{--ts: 56.4;}
	#diamond_03{--ts: 44.4;}
	#diamond_04{--ts: 32.4;}
	#diamond_05{--ts: 20.4;}}


@media only screen and (orientation : portrait){
	body{font-size: calc(12px + .3vw);}
	h1{font-size: calc(15px + .3vw); margin: 1vh 0;}
	h2, #userFlow span:nth-of-type(1){font-size: calc(13px + .3vw);}
	h2{margin: 1vh 0;}
	.line{height: 2px;}
	#logo-ver{display: block;}
	#logo-hor{display: none;}
	#overview .sectionContent, #designApproach .sectionContent, #visulRefinements .sectionContent, #outcome .sectionContent{grid-template-columns: 80vw; justify-content: center; align-items: center;}
	
	#fotageIcons{column-gap: 1vw; row-gap: 1vw;}
	.footageIcon{width: 26vw; height: 32.52vw; margin-top: -16.88vw;}
	.footageIcon:nth-of-type(1){margin: 0 21vw;}
	.footageIcon:nth-of-type(3), .footageIcon:nth-of-type(8){margin-right: 0.02vw;}
	.image{width: 80vw;}
	#bingoWhite-1{width: 15vw; top: 2vh; right: 5vw;}
	#bingoRed-14{width: 16vw; bottom: 30vh; right: -3vw;}
	#bingoWhite-26{width: 18vw; top: -7vh; left: -11vw;}
	#bingoRed-32{width: 16vw; bottom: 30vh; left: -9vw;}
	#bingoRed-88{width: 18vw; top: -9vh; left: -8vw;}
	#bellWhite{width: 17vw; bottom: 15vh; right: 7vw;}
	#bellRed{width: 13vw; bottom: 30vh; right: 8vw;}
	#cherryWhite{width: 16vw; top: -9vh; left: -9vw;}
	#cherryRed{width: 15vw; bottom: 19vh; left: -5vw;}
	#poundWhite{width: 11vw; bottom: 23vh; left: -5vw;}
	#poundRed{width: 12vw; bottom: 10vh; right: -6vw;}
	#sevenWhite{width: 13vw; bottom: 2vh; right: 2vw;}
	#sevenRed{width: 11vw; bottom: 5vh; right: 15vw;}
	#tripleSevenWhite{width: 17vw; bottom: 2vh; left: -9vw;}
	#tripleSevenRed{width: 19vw; bottom: 35vh; left: -7vw;}
	.footage{margin-top: 2vh;}
	.mainText{margin-bottom: 1vh; display: flex; flex-direction: column; align-items: center;}
}
@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, #userFlow span:nth-of-type(1){font-size: calc(13px + .5vw);}
	h2{margin: 1vh 0;}
	.image{width: 60vw;}
	#fotageIcons{column-gap: 1.5vw; row-gap: 1.5vw;}
	.footageIcon{width: 19vw; height: 23.76vw; margin-top: -11.88vw;}
	.footageIcon:nth-of-type(1){margin: 0 16vw;}
	.footageIcon:nth-of-type(3), .footageIcon:nth-of-type(8){margin-right: 0.01vw;}
	#bingoWhite-1{width: 12vw;}
	#bingoRed-14{width: 13vw; bottom: 40vh;}
	#bingoWhite-26{width: 15vw;}
	#bingoRed-32{width: 13vw;}
	#bingoRed-88{width: 13vw;}
	#bellWhite{width: 12vw; bottom: 25vh;}
	#bellRed{width: 12vw; bottom: 40vh;}
	#cherryWhite{width: 11vw;}
	#cherryRed{width: 14vw;}
	#poundWhite{bottom: 28vh;}
	#sevenRed{width: 10vw;}
	#tripleSevenRed{width: 15vw; bottom: 35vh;}
	#performList{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 5vw; justify-content: space-between;}
}
@media only screen and (orientation : landscape){
	body{font-size: calc(12px + .2vw);}
	h1{font-size: calc(17px + .2vw);}
	h2, #userFlow span:nth-of-type(1){font-size: calc(15px + .2vw);}
	.line{height: 3px;}
	#logo-hor{display: block;}
	#logo-ver{display: none;}
	#overview .sectionContent, #designApproach .sectionContent, #visulRefinements .sectionContent, #outcome .sectionContent{justify-content: space-between; align-items: center;}
	#designApproach .sectionContent .image, #outcome .sectionContent .image{grid-column: 1;}
	#overview .sectionContent .image,  #visulRefinements .sectionContent .image{grid-column: 2;}
	#outcome .sectionContent .image{grid-row: 1;}
	#fotageIcons{width: 35vw; column-gap: 1vw; row-gap: 1vw;}
	.footageIcon{width: 11vw; height: 13.76vw; margin-top: -6.88vw;}
	.footageIcon:nth-of-type(1){margin: 0 11vw;}
	.footageIcon:nth-of-type(3), .footageIcon:nth-of-type(8){margin-right: 0.01vw;}
	.footage{margin-top: 5vh;}
	#performList{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 5vw; justify-content: space-between;}
	#userReq, #whyMatter, #jsonSolution{columns: 2;}
	#myRoles{columns: 3;}
	#overview .sectionContent .mainText:nth-child(4), #outcome .sectionContent .mainText:nth-child(2){display: flex; flex-direction: column; align-items: center;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1){
	#overview .sectionContent, #visulRefinements .sectionContent{grid-template-columns: 50vw 35vw;}
	#designApproach .sectionContent, #outcome .sectionContent{grid-template-columns: 35vw 50vw;}
	#overview .sectionContent .mainText:nth-child(1), #overview .sectionContent .mainText:nth-child(4), #overview .sectionContent .mainText:nth-child(5), #designApproach .sectionContent .mainText:nth-child(1), #designApproach .sectionContent .mainText:nth-child(4), #visulRefinements .sectionContent .mainText:nth-child(3), #outcome .sectionContent .mainText:nth-child(2){grid-column: 1/3;}
	#overview .sectionContent .mainText:nth-child(3){grid-column: 1;}
	#designApproach .sectionContent .mainText:nth-child(3){grid-column: 2;}
	#overview .sectionContent .image, #designApproach .sectionContent .image{grid-row: 2/4;}
	#visulRefinements .sectionContent .image{grid-row: 1/3;}
	#visulRefinements .sectionContent .mainText:nth-child(1){align-self: end;}
	#visulRefinements .sectionContent .mainText:nth-child(2){align-self: start;}
	#bingoWhite-1{width: 8vw; top: -5vh; right: 2vw;}
	#bingoRed-14{width: 11vw; top: 40vh; right: -5vw;}
	#bingoWhite-26{width: 10vw; top: -30vh; left: -8vw;}
	#bingoRed-32{width: 9vw; bottom: 75vh; left: 28vw;}
	#bingoRed-88{width: 7vw; top: -5vh; right: -4vw;}
	#bellWhite{width: 8vw; bottom: 68vh; left: 83vw;}
	#bellRed{width: 6vw; top: 25vh; left: 33vw;}
	#cherryWhite{width: 9vw; top: auto; bottom: 60vh; left: 50vw;}
	#cherryRed{width: 8vw; top: 17vh; left: 52vw;}
	#poundWhite{width: 5vw; bottom: 62vh; left: -2vw;}
	#poundRed{width: 7vw; bottom: 25vh; right: 56vw;}
	#sevenWhite{width: 6vw; top: 5vh; right: 2vw;}
	#sevenRed{width: 5vw; bottom: 35vh; left: 20vw;}
	#tripleSevenWhite{width: 12vw; bottom: 47vh; left: -4vw;}
	#tripleSevenRed{width: 10vw; bottom: 32vh; left: 52vw;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3){
	#overview .sectionContent, #visulRefinements .sectionContent{grid-template-columns: 40vw 45vw;}
	#designApproach .sectionContent, #outcome .sectionContent{grid-template-columns: 45vw 40vw;}
	#overview .sectionContent .mainText:nth-child(4), #overview .sectionContent .mainText:nth-child(5), #visulRefinements .sectionContent .mainText:nth-child(3){grid-column: 1;}
	#designApproach .sectionContent .mainText:nth-child(1), #outcome .sectionContent .mainText:nth-child(2){grid-column: 2;}
	#overview .sectionContent .image{grid-row: 2/6;}
	#designApproach .sectionContent .image, #visulRefinements .sectionContent .image{grid-row: 1/4;}
	#outcome .sectionContent .image{grid-row: 1/3;}
	#designApproach .sectionContent .mainText:nth-child(1){align-self: end;}
	#visulRefinements .sectionContent .mainText:nth-child(2){align-self: center;}
	#designApproach .sectionContent .mainText:nth-child(3), #visulRefinements .sectionContent .mainText:nth-child(3), #outcome .sectionContent .mainText:nth-child(2){align-self: start;}
	#bingoRed-14{width: 9vw; top: 65vh;}
	#bellRed{top: 15vh;}
	#cherryRed{width: 8vw; top: 32vh; left: 47vw;}
	#cherryWhite{bottom: 70vh;}
	#poundRed{right: 46vw;}
	#sevenWhite{top: 15vh; right: 7vw;}
	#sevenRed{width: 7vw; bottom: 30vh; left: 25vw;}
	#tripleSevenRed{bottom: 23vh; left: 47vw;}
	#myRoles{columns: 2;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (min-width: 1250px){}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9) and (max-width: 900px){
	#overview .sectionContent, #designApproach .sectionContent, #visulRefinements .sectionContent, #outcome .sectionContent{grid-template-columns: 1fr;}
	#overview .sectionContent .mainText:nth-child(1), #overview .sectionContent .mainText:nth-child(2), #overview .sectionContent .mainText:nth-child(3), #overview .sectionContent .mainText:nth-child(4), #overview .sectionContent .mainText:nth-child(5), #designApproach .sectionContent .mainText:nth-child(1), #designApproach .sectionContent .mainText:nth-child(2), #designApproach .sectionContent .mainText:nth-child(3), #designApproach .sectionContent .mainText:nth-child(4), #visulRefinements .sectionContent .mainText:nth-child(1), #visulRefinements .sectionContent .mainText:nth-child(2), #visulRefinements .sectionContent .mainText:nth-child(3), #outcome .sectionContent .mainText:nth-child(1), #outcome .sectionContent .mainText:nth-child(2), #overview .sectionContent .image, #designApproach .sectionContent .image, #visulRefinements .sectionContent .image, #outcome .sectionContent .image{grid-column: 1;}
	#overview .sectionContent .image{grid-row: 6;}
	#designApproach .sectionContent .image{grid-row: 5;}
	#visulRefinements .sectionContent .image{grid-row: 4;}
	#outcome .sectionContent .image{grid-row: 3;}
	/*#objectives, #designChallenges, */#uiUxStrat{columns: 2;}
	.image{width: 60vw;}
	#fotageIcons{width: 60vw; column-gap: 1.5vw; row-gap: 1.5vw;}
	.footageIcon{width: 19vw; height: 23.76vw; margin-top: -11.88vw;}
	.footageIcon:nth-of-type(1){margin: 0 16vw;}
	.footageIcon:nth-of-type(3), .footageIcon:nth-of-type(8){margin-right: 0.01vw;}
	#bingoWhite-1{width: 12vw; top: -7vh;}
	#bingoRed-14{width: 13vw; top: auto; bottom: 25vh; right: -7vw;}
	#bingoWhite-26{width: 14vw; top: auto; bottom: -5vh;}
	#bingoRed-32{width: 11vw; bottom: 125vh; left: 78vw;}
	#bingoRed-88{width: 13vw; top: auto; bottom: -5vh; right: -7vw;}
	#bellWhite{width: 12vw; bottom: 98vh; left: 63vw;}
	#bellRed{width: 11vw; top: auto; bottom: 130vh; left: 63vw;}
	#cherryWhite{width: 11vw;top: auto; bottom: 130vh; left: 10vw;}
	#cherryRed{width: 13vw; top: auto; bottom: 100vh; left: 7vw;}
	#poundWhite{width: 10vw; bottom: 112vh;}
	#poundRed{width: 10vw; right: 12vw;}
	#sevenWhite{width: 11vw; top: auto; bottom: 130vh; right: 9vw;}
	#sevenRed{width: 10vw; bottom: 15vh;}
	#tripleSevenWhite{width: 17vw; bottom: 57vh; left: 10vw;}
	#tripleSevenRed{width: 15vw; bottom: 23vh; left: 17vw;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9) and (min-width: 900px){
	section{width: 80vw;}
	h1{margin: 5vh 0 2vh 0;}
	h2{margin: 1vh 0;}
	#overview .sectionContent, #visulRefinements .sectionContent{grid-template-columns: 35vw 40vw;}
	#designApproach .sectionContent, #outcome .sectionContent{grid-template-columns: 40vw 35vw;}
	#bingoWhite-1{width: 8vw;}
	#bingoRed-14{width: 11vw;}
	#bingoWhite-26{width: 10vw;}
	#bingoRed-32{width: 9vw;}
	#bingoRed-88{width: 7vw;}
	#bellWhite{width: 8vw;}
	#bellRed{width: 8vw;}
	#cherryWhite{width: 9vw; top: auto; bottom: 90vh; left: 40vw;}
	#cherryRed{width: 8vw; top: 42vh; left: 37vw;}
	#poundWhite{width: 7vw;}
	#poundRed{width: 7vw;}
	#sevenWhite{width: 8vw;}
	#sevenRed{width: 7vw;}
	#tripleSevenWhite{width: 12vw;}
	#tripleSevenRed{width: 10vw;}
}

@keyframes appear{0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes diamondZoomIn{from{opacity: 0; transform: translate(-50%, -50%) scale(var(--os));} to{opacity: 1; transform: translate(-50%, -50%) scale(var(--ts));}}
@keyframes diamondZoomOut{from{opacity: 1; transform: translate(-50%, -50%) scale(var(--ts));} to{opacity: 0; transform: translate(-50%, -50%) scale(var(--os));}}


@keyframes logoDiamondSpin{0%{-webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);}
40%, 50%{-webkit-transform: rotateY(0); transform: rotateY(0);}
100%{-webkit-transform: rotateY(-360deg); transform: rotateY(-360deg);}}

@keyframes logoVirginSpinHide{0%{opacity: 0;}
40%, 50%{opacity: 1;}
75%{opacity: 0;}
100%{opacity: 1;}}

@keyframes vgnLogo{0%{transform: translate(-50%, -37%) scale(var(--os));} to{transform: translate(-50%, -37%) scale(0);}}
@keyframes gamesAni {0%{transform: scale(0);} 100%{transform: scale(1);}}
@keyframes swingAni{from{transform: rotate(var(--or));} to{transform: rotate(var(--tr));}}
@keyframes diamondZoon{from{scale: 0;} to{scale: 1;}}
@keyframes bgani{0%, 5%{background-position: center top;} 95%, 100%{background-position: center bottom;}}
/*==============================*/