@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{font-weight: 600; text-transform: uppercase; margin: 1vh 0;}
h1, h2, p{text-align: center;}
h1{font-weight: 600; 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;}
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: 1677px; height: 2097px; transform: translate(-50%, -50%) scale(var(--os));*/ width: 100%; height: 100%; transform: translate(-50%, -50%);}
/*.diamond, #logoMain{width: 200px; height: 250px; margin-top: -125px; margin-left: -100px;}*/
.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, #designApproach .sectionContent .mainText:nth-child(3){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: 90vw; 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;}
.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;}
.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: 25deg;}
#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{font-size: calc(13px + .3vw); margin: 1vh 0;}
	.line{height: 2px;}
	#logo-ver{display: block;}
	#logo-hor{display: none;}
	/*#content, .mainText, .image{width: 80vw;}*/
	#overview .sectionContent, #designApproach .sectionContent, #visulRefinements .sectionContent, #outcome .sectionContent{grid-template-columns: 80vw; justify-content: center; align-items: center;}
	.mainText{margin-bottom: 1vh; display: flex; flex-direction: column; align-items: center;}
	.image{justify-self: 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.01vw;}
	.image{width: 80vw;}
	#bingoWhite-1{width: 15vw; top: 2vh; left: 70vw;}
	
	#cherryWhite{width: 16vw; top: -9vh; left: -9vw;}
	#bellWhite{width: 17vw; top: 85vh; left: 75vw;}
	#tripleSevenRed{width: 19vw; top: auto; bottom: 30vh; left: -7vw;}

	#sevenRed{width: 11vw; top: 100vh; left: 60vw;}
	#bellRed{width: 13vw; top: 80vh; left: 68vw;}
	#poundWhite{width: 11vw; top: 72vh; left: -5vw;}
	#bingoRed-88{width: 18vw; top: -9vh; left: -8vw;}

	#bingoRed-14{width: 16vw; top: auto; bottom: 30vh; left: 75vw;}
	#bingoWhite-26{width: 18vw; top: -7vh; left: -11vw;}
	#cherryRed{width: 15vw; top: auto; bottom: 35vh; left: -2vw;}
	#sevenWhite{width: 13vw; top: auto; bottom: 12vh; left: auto; right: 2vw;}

	#bingoRed-32{width: 16vw; left: -9vw; top: auto; bottom: 40vh;}
	#tripleSevenWhite{width: 17vw; left: -9vw; top: auto; bottom: 12vh;}
	#poundRed{width: 12vw; left: auto; right: -6vw; top: auto; bottom: 5vh;}
	.footage{margin-top: 2vh;}
}
@media only screen and (orientation : portrait) and (min-aspect-ratio: 3/4){
	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;}
	.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: 2vh; left: 75vw;}
	
	#cherryWhite{width: 11vw; top: -7vh; left: -9vw;}
	#bellWhite{width: 12vw; top: 85vh; left: 78vw;}
	#tripleSevenRed{width: 15vw; top: 68vh; left: -7vw;}

	#sevenRed{width: 10vw; top: 100vh; left: 60vw;}
	#bellRed{width: 12vw; top: 80vh; left: 68vw;}
	#poundWhite{width: 11vw; top: 72vh; left: -5vw;}
	#bingoRed-88{width: 13vw; top: -9vh; left: -8vw;}

	#bingoRed-14{width: 13vw; top: 57vh; left: 75vw;}
	#bingoWhite-26{width: 15vw; top: -7vh; left: -11vw;}
	#cherryRed{width: 14vw; top: 67vh; left: 2vw;}
	#sevenWhite{width: 13vw; top: auto; bottom: 12vh; left: auto; right: 9vw;}

	#bingoRed-32{width: 13vw; left: 8vw; top: auto; bottom: 55vh;}
	#tripleSevenWhite{width: 17vw; left: -9vw; top: auto; bottom: 12vh;}
	#poundRed{width: 12vw; left: auto; right: -6vw; top: auto; bottom: 5vh;}
	#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{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;}
	.mainText{margin-bottom: 2vh;}
	.footage{margin-top: 5vh;}
	#performList{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 5vw; justify-content: space-between;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
	/*.mainText{width: 40vw;}
	.image{width: 45vw; height: auto;}*/
	#overview .sectionContent, #visulRefinements .sectionContent{grid-template-columns: 50vw 35vw;}
	#designApproach .sectionContent, #outcome .sectionContent{grid-template-columns: 35vw 50vw;}
	#overview .sectionContent .mainText:nth-child(1), #designApproach .sectionContent .mainText:nth-child(1), #visulRefinements .sectionContent .mainText:nth-child(1){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;}
	#bingoWhite-1{width: 8vw; top: 8vh; left: 75vw;}
	
	#cherryWhite{width: 9vw; top: -7vh; left: -7vw;}
	#bellWhite{width: 8vw; top: 48vh; left: 83vw;}
	#tripleSevenRed{width: 10vw; top: 38vh; left: 49vw;}

	#sevenRed{width: 5vw; top: 60vh; left: 20vw;}
	#bellRed{width: 6vw; top: 50vh; left: 28vw;}
	#poundWhite{width: 5vw; top: 22vh; left: 5vw;}
	#bingoRed-88{width: 7vw; top: -4vh; left: -3vw;}

	#bingoRed-14{width: 11vw; top: 25vh; left: 85vw;}
	#bingoWhite-26{width: 10vw; top: -7vh; left: -8vw;}
	#cherryRed{width: 8vw; top: 27vh; left: 52vw;}
	#sevenWhite{width: 6vw; top: auto; bottom: 12vh; left: auto; right: 2vw;}

	#bingoRed-32{width: 9vw; left: 28vw; top: auto; bottom: 55vh;}
	#tripleSevenWhite{width: 12vw; left: -4vw; top: auto; bottom: 12vh;}
	#poundRed{width: 7vw; left: auto; right: -6vw; top: auto; bottom: 5vh;}
	
}
@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;}
	#designApproach .sectionContent .mainText, #outcome .sectionContent .mainText{grid-column: 2;}
	#overview .sectionContent .image, #designApproach .sectionContent .image{grid-row: 1/4;}
	#visulRefinements .sectionContent .image{grid-row: 1/3;}
	#overview .sectionContent .mainText:nth-child(1), #designApproach .sectionContent .mainText:nth-child(1), #visulRefinements .sectionContent .mainText:nth-child(1){align-self: end;}
	#overview .sectionContent .mainText:nth-child(3), #designApproach .sectionContent .mainText:nth-child(3), #visulRefinements .sectionContent .mainText:nth-child(2){align-self: start;}
	#bingoWhite-1{width: 8vw; top: 10vh; left: 75vw;}
	
	#cherryWhite{width: 9vw; top: -7vh; left: -8vw;}
	#bellWhite{width: 8vw; top: 45vh; left: 77vw;}
	#tripleSevenRed{width: 10vw; top: 18vh; left: 42vw;}

	#sevenRed{width: 7vw; top: 65vh; left: 30vw;}
	#bellRed{width: 6vw; top: 50vh; left: 33vw;}
	#poundWhite{width: 5vw; top: 7vh; left: 15vw;}
	#bingoRed-88{width: 7vw; top: -8vh; left: -8vw;}

	#bingoRed-14{width: 9vw; top: 25vh; left: 85vw;}
	#bingoWhite-26{width: 10vw; top: -12vh; left: -8vw;}
	#cherryRed{width: 8vw; top: 2vh; left: 45vw;}
	#sevenWhite{width: 6vw; top: auto; bottom: 12vh; left: auto; right: 2vw;}

	#bingoRed-32{width: 9vw; left: 33vw; top: auto; bottom: 65vh;}
	#tripleSevenWhite{width: 12vw; left: -4vw; top: auto; bottom: 12vh;}
	#poundRed{width: 7vw; left: auto; right: -6vw; top: auto; bottom: 5vh;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9){
	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; top: 12vh; left: 70vw;}
	
	#cherryWhite{width: 9vw; top: -3vh; left: -8vw;}
	#bellWhite{width: 8vw; top: 50vh; left: 72vw;}
	#tripleSevenRed{width: 10vw; top: 23vh; left: 37vw;}
	
	#sevenRed{width: 7vw; top: 65vh; left: 25vw;}
	#bellRed{width: 6vw; top: 50vh; left: 33vw;}
	#poundWhite{width: 7vw; top: 7vh; left: 5vw;}
	#bingoRed-88{width: 7vw; top: -5vh; left: -8vw;}

	#bingoRed-14{width: 11vw; top: 25vh; left: 80vw;}
	#bingoWhite-26{width: 10vw; top: -5vh; left: -12vw;}
	#cherryRed{width: 8vw; top: 7vh; left: 35vw;}
	#sevenWhite{width: 8vw; top: auto; bottom: 15vh; left: auto; right: -2vw;}

	#bingoRed-32{width: 9vw; left: 33vw; top: auto; bottom: 65vh;}
	#tripleSevenWhite{width: 12vw; left: -8vw; top: auto; bottom: 12vh;}
	#poundRed{width: 7vw; left: auto; right: -11vw; top: auto; bottom: 5vh;}
}

@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;}}
/*==============================*/