/*<style>*/

.RaceSeries #Graphics {background-color: #0066ff;}
    .RaceSeries .ParallaxBackground {display: none !important;}
    .Race.Desert #Graphics {background-color: #F5CE4B !important;}
    .Race.City #Graphics {background-color: #4c4b4b !important;}
    .Race.Winter #Graphics {background-color: white !important;}
        .Race.Winter #Graphics #Foreground1 {display: block; width: var(--WorldWidth); content-visibility: visible;}
        snowfall {position: absolute; display: none;}
        snowflake {font-size: 5pt;}

body:not(.iOS) .HighQualityGraphics.RaceSeries #Grid, body:not(.iOS) .HighQualityGraphics.RaceSeries #GridTable, body:not(.iOS) .HighQualityGraphics.RaceSeries .Row, body:not(.iOS) .HighQualityGraphics.RaceSeries .Cell, body:not(.iOS) .HighQualityGraphics.RaceSeries .Chunk, body:not(.iOS) .HighQualityGraphics.RaceSeries .Tree, body:not(.iOS) .HighQualityGraphics.RaceSeries .Item, body:not(.iOS) .HighQualityGraphics.RaceSeries .Tree .Body, body:not(.iOS) .HighQualityGraphics.RaceSeries .Item .Body, body:not(.iOS) .HighQualityGraphics.RaceSeries .Boulder, body:not(.iOS) .HighQualityGraphics.RaceSeries .Boulder .Body, body:not(.iOS) .HighQualityGraphics.RaceSeries .Car .Body, body:not(.iOS) .HighQualityGraphics.RaceSeries .Ramp, body:not(.iOS) .HighQualityGraphics.RaceSeries .Ramp .Body, body:not(.iOS) .HighQualityGraphics.WaveRace .RedMarker, body:not(.iOS) .HighQualityGraphics.WaveRace .RedMarker .Body, body:not(.iOS) .HighQualityGraphics.WaveRace .Enemy, body:not(.iOS) .HighQualityGraphics.WaveRace .Enemy .Body, .RaceSeries .CollectedLetterItem.Collected .Body {transform-style: preserve-3d !important;}
body:not(.iOS) .HighQualityGraphics.RaceSeries #Player {--rotateX: -37deg; transform: translate(var(--left), var(--top)) rotateX(var(--rotateX));}
body:not(.iOS) .HighQualityGraphics.RaceSeries .Car .Image {transform: rotateX(-37deg);}
.RaceSeries #World {background-color: transparent; transform: perspective(200px) rotateX(20deg); perspective: 600px; top: -100px;}
.Race .Item .Body, .RaceSeries .Tree .Body, .RaceSeries .Boulder .Body, .RaceSeries .Ramp .Body, .WaveRace .RedMarker .Body, .WaveRace .Item .Text {transform: rotateX(-46deg) translateY(-25px);}
body:not(.iOS) .HighQualityGraphics.WaveRace .RacePanelItem .Body, body:not(.iOS) .HighQualityGraphics.WaveRace .Boulder .Body, body:not(.iOS) .HighQualityGraphics.WaveRace .Ramp .Body, body:not(.iOS) .HighQualityGraphics.WaveRace .Item .Text  {transform: rotateX(-30deg) translateY(-20px)}
body:not(.iOS) .VeryHighQualityGraphics.RaceSeries .Item .Image, body:not(.iOS) .VeryHighQualityGraphics.RaceSeries .Boulder .Image, body:not(.iOS) .VeryHighQualityGraphics.RaceSeries .Ramp .Image, body:not(.iOS) .VeryHighQualityGraphics.RaceSeries .Boulder .Body, body:not(.iOS) .VeryHighQualityGraphics.WaveRace .RedMarker .Image {filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.5));}
body:not(.iOS) .VeryHighQualityGraphics.RaceSeries .Tree .Image {filter: drop-shadow(0px 5px 4px rgba(0,0,0,0.5)); margin-top: -6px;}
body:not(.iOS) .HighQualityGraphics.RaceSeries .CollectedLetterItem .Body {transform: rotateX(-46deg) translateY(-50px);}
body:not(.iOS) .HighQualityGraphics.RaceSeries .Boulder .Body {background-size: 100% 100%;}
body:not(.iOS) .HighQualityGraphics.WaveRace .Enemy:not(.Car) .Image {transform: rotateX(-38deg) translateY(-20px) translateZ(37px);}
body:not(.iOS) .HighQualityGraphics.Race .LeftTree .Image, body:not(.iOS) .HighQualityGraphics.Race .RightTree .Image {transform: none;}
body:not(.iOS) .HighQualityGraphics snowfall {display: block;}

.RaceSeries #Grid {transition: transform 0.2s linear;}
.RaceSeries #Grid.Turbo {transition: transform 0.1s linear;}
.RaceSeries #GridTable {width: 200%; margin-left: -79%; padding-left: 79%; transition: transform 0.8s linear; background-image: var(--Grass); background-size: 128px;}
.RaceSeries #World.DownwardsScroll #GridTable {animation-duration: 300s; animation-name: StalledDownwardsGridScroll;}

.RaceSeries #LevelStatus .StatusIcon {--itemColor: transparent; background-image: url("graphics/items/finishflag.png"); }
.RaceSeries #Player .Body {--RotateAngle: 1deg;}
.RaceSeries #Player .Image {background-image: url('graphics/players/racecar.png'); background-size: 100% 100%; border-radius: 15px;}
.RaceSeries #Player.Jumping .Body {animation: CarJumping 1.3s linear forwards; animation-play-state: var(--AnimationPlayState);}
.RaceSeries .ShieldsUp {background: none; box-shadow: none;}
.RaceSeries #Player.MoveRight .Body {transform: rotateZ(var(--RotateAngle));}
.RaceSeries #Player.MoveLeft .Body {transform: rotateZ(calc(-1 * var(--RotateAngle)));}
.RaceSeries #Player.Jumping .Body {transform: rotateX(-10deg);}
.RaceSeries #Player.Jumping.MoveLeft .Body {transform: rotateX(-10deg) rotateZ(var(--RotateAngle));}
.RaceSeries #Player.Jumping.MoveRight .Body {transform: rotateX(-10deg) rotateZ(calc(-1 * var(--RotateAngle)));}

.iOS #GameBox.RaceSeries.GameOver #Graphics {background-color: black !important;}
.iOS .RaceSeries.GameOver #World {opacity: 0; pointer-events: none;}

@keyframes CarJumping {
    0% {transform: translateY(0px);}
    30% {transform: translateY(-200px);}
    94% {transform: translateY(-9px);}
    96% {transform: translateY(6px);}
    98% {transform: translateY(-3px);}
    100% {transform: translateY(0px);}
}

.RaceSeries .Chunk {content-visibility: visible;}
    .RaceSeries .Cell {margin-top: -1px;}
    .Race .Chunk {background-color: #232323; xbackground-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,#232323 15.01%,#232323 84.99%,rgba(0,0,0,0) 85%,rgba(0,0,0,0) 100%);}

.Grass {pointer-events: none;}
.RaceSeries .Grass {transform: translate(var(--left), var(--top)) scale(1.1);}
.Grass, .Tree, .SkewMarker, .RaceSeries #GridTable {--Grass: url('graphics/textures/grass.jpg');}
.SkewMarker {contain: size layout style;}
    .Winter .Grass, .Winter .Tree, .Winter .SkewMarker, .Race.Winter  #GridTable {--Grass: url('graphics/textures/snow.jpg');}
    .Desert .Grass, .Desert .Tree, .Desert .SkewMarker, .Race.Desert #GridTable {--Grass: url('graphics/textures/desert.jpg');}
    .City .Grass, .City .Tree, .City .SkewMarker, .Race.City #GridTable {--Grass: url('graphics/textures/concrete.jpg');}
        .Park .Grass, .Park .Tree{background-color: #349E0C;}
        .Winter .Grass, .Winter .Tree {background-color: white;}
        .Desert .Grass, .Desert .Tree {background-color: #FBD553;}
        .City .Grass, .City .Tree {background-color: gray;}
    .City .Grass, .City .Tree, .City .SkewMarker {--Grass: url('graphics/textures/concretelight.jpg');}
.Grass, .RaceSeries .Tree .Body  {background-image: var(--Grass); background-size: 128px;}
.Tree {background-image: var(--Grass);}
.Tree .Image {background-image: url('graphics/games/race/tree.png'), var(--Grass); background-repeat: no-repeat, repeat; background-size: contain, 128px; background-position: center, 0px 0px !important;}
    .Race .LeftTree .Image {transform: rotateZ(-12deg); background-image: url('graphics/games/race/tree.png'); background-color: transparent;}
    .Race .RightTree .Image {transform: rotateZ(12deg) scaleX(-1); background-image: url('graphics/games/race/tree.png'); background-color: transparent;}
    .Race.Winter .Tree .Image {background-image: url('graphics/games/race/snowtree.png');}
    .Race.Desert .Tree .Image {background-image: url('graphics/games/race/desertrock2.png');}
    .Race.City .LeftTree .Image {transform: rotateZ(-25deg); background-image: url('graphics/games/race/lamppostbent.png'); }
    .Race.City .RightTree .Image {transform: rotateZ(25deg) scaleX(-1); background-image: url('graphics/games/race/lamppostbent.png'); }
    body:not(.iOS) .HighQualityGraphics.Race.City .LeftTree .Image {transform: none; background-image: url('graphics/games/race/lamppost.png'); }
    body:not(.iOS) .HighQualityGraphics.Race.City .RightTree .Image {transform: scaleX(-1); background-image: url('graphics/games/race/lamppost.png'); }
.RedMarker {background-color: red;}
    .RaceSeries .RedMarker {background: linear-gradient(to right, #ce0000 0%,#ff0000 31%,#ff0000 70%,#ff0000 70%,#ce0000 100%);}
    .Police .RedMarker {background-color: transparent; background-image: url('graphics/textures/roadline.png') }
    .Race .RedMarker {pointer-events: none;}
.WhiteMarker, .FinishWhiteMarker  {background-color: white;}
    .Race .WhiteMarker {pointer-events: none;}
    .RaceSeries .WhiteMarker  {background: linear-gradient(to right, #cccccc 0%,#ffffff 31%,#ffffff 70%,#cccccc 100%);}
    .Police .WhiteMarker, .Police .SkewMarker .Image {background-color: transparent; background-image: url('graphics/textures/roadline.png') !important; }
    .LeftSkewRightWhiteMarker {background-image: var(--Grass); background-repeat: repeat; background-size: 128px; background-position: 0px 0px; z-index: 1;}
    .RightSkewLeftWhiteMarker {background-image: var(--Grass); background-repeat: repeat; background-size: 128px; background-position: 0px 0px; z-index: 1;}
    .RightSkewRightWhiteMarker, .LeftSkewLeftWhiteMarker {z-index: 1;}
    .LeftSkewRightWhiteMarker .Image {transform: translateX(25px) skew(-44deg, 0deg); background-color: white;}
    .RightSkewRightWhiteMarker .Image {transform: translateX(25px) skew(-44deg, 0deg); background-color: white;}
    .LeftSkewLeftWhiteMarker .Image {transform: translateX(-25px) skew(44deg, 0deg); background-color: white;}
    .RightSkewLeftWhiteMarker .Image {transform: translateX(-25px) skew(44deg, 0deg); background-color: white;}
.RedMarker, .FinishBlackMarker {background-color: black;}
    .LeftSkewRightRedMarker {background-image: var(--Grass); background-repeat: repeat; background-size: 128px; background-position: 0px 0px; z-index: 1;}
    .RightSkewLeftRedMarker {background-image: var(--Grass); background-repeat: repeat; background-size: 128px; background-position: 0px 0px; z-index: 1;}
    .RightSkewRightRedMarker, .LeftSkewLeftRedMarker {z-index: 1;}
    .LeftSkewRightRedMarker .Image {transform: translateX(25px) skew(-45deg, 0deg); background-color: red;}
    .RightSkewRightRedMarker .Image {transform: translateX(25px) skew(-45deg, 0deg); background-color: red;}
    .LeftSkewLeftRedMarker .Image {transform: translateX(-25px) skew(45deg, 0deg); background-color: red;}
    .RightSkewLeftRedMarker .Image {transform: translateX(-25px) skew(45deg, 0deg); background-color: red;}

.Desert .Boulder .Image {background-image: url('graphics/games/race/desertrock.png');}
.Ramp {contain: none;}
.Ramp .Image {background: url('graphics/games/race/ramp.png'); background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; background-position: center !important;}
.Ramp .Body {margin-top: 10px; transform: rotateX(-2deg) translateY(-25px)}

.Car .Image {background-color: transparent; background-position: center !important; background-repeat: no-repeat; background-image: url('graphics/players/racecar.png'); background-size: 100% 100% !important;}


.Race .FlagItem .Image, .Race .FlagUpgradeItem.StatusIcon {background-image: url('graphics/games/race/flagred.png'); background-size: contain; background-color: transparent; background-repeat: no-repeat; background-position: center; border-radius: 0px;}
.Race .FlagItem.Blue .Image, .Race .FlagUpgradeItem.StatusIcon.Blue {background-image: url('graphics/games/race/flagblue.png');}
.Race .FlagItem.Purple .Image, .Race .FlagUpgradeItem.StatusIcon.Purple {background-image: url('graphics/games/race/flagpurple.png');}
.Race .FlagItem.Orange .Image, .Race .FlagUpgradeItem.StatusIcon.Orange {background-image: url('graphics/games/race/flagorange.png');}
.Race .FlagItem.Magenta .Image, .Race .FlagUpgradeItem.StatusIcon.Magenta {background-image: url('graphics/games/race/flagmagenta.png');}
.Race .FlagItem.Yellow .Image, .Race .FlagUpgradeItem.StatusIcon.Yellow {background-image: url('graphics/games/race/flagyellow.png');}
.Race .FlagItem.Cyan .Image, .Race .FlagUpgradeItem.StatusIcon.Cyan {background-image: url('graphics/games/race/flagcyan.png');}
.Race .FlagItem.Green .Image, .Race .FlagUpgradeItem.StatusIcon.Green {background-image: url('graphics/games/race/flaggreen.png');}
.Race .FlagItem .Image {transform-origin: 15%; /*xanimation: FlagWave 1s linear forwards infinite; xanimation-play-state: var(--AnimationPlayState);*/}
.Race .FlagItem.Collected .Image {animation: BrightBlurOut 0.5s linear forwards; animation-play-state: var(--AnimationPlayState);}

.RacePanelItem {--itemColor: red; background-color: var(--itemColor); will-change: background-color, box-shadow, z-index; border: solid 1px black; border-radius: 0px; width: 150px;}
.RacePanelItem .Text, .RacePanelItem.Collected .Text {animation: none; font-family: var(--DefaultFontFamily); font-size: 28pt; padding-top: 2px; margin: 5px -10px 0px -10px; text-align: center; position: absolute; top: 0px; left: 0px; width: calc(100% + 20px); height: 100%; text-shadow: 0px 0px 2px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;}
    .Literacy .RacePanelItem .Text, .Literacy .RacePanelItem.Collected .Text {font-family: QuicksandAlternate, Quicksand, sans-serif; margin: 0px -10px 0px -10px; font-weight: bold;}
.RacePanelItem.Collected {z-index: 2; background-color: limegreen; box-shadow: 0px 0px 2px limegreen, 0px 0px 10px limegreen, 0px 0px 20px limegreen;}
.Race .RacePanelItem.Collected {animation: none;}
.RacePanelItem.Collided {background-color: #900000;}

.RaceSeries #FireButton {display: none;}

.WaveRace #World {display: block !important;}
body .WaveRace #World {animation: WavePerspective 5s ease infinite; animation-play-state: var(--AnimationPlayState); background-image: url('graphics/games/waverace/wave.jpg');}
body.iOS .WaveRace #World {animation: none; background-image: none;}

@keyframes WavePerspective {
    0% {transform: perspective(200px) rotateX(20deg) rotateY(-0.7deg);}
    50% {transform: perspective(200px) rotateX(23deg) rotateY(0.7deg);}
    100% {transform: perspective(200px) rotateX(20deg) rotateY(-0.7deg);}
}

.WaveRace #GridTable {background-image: url('graphics/games/waverace/wave.png');}
body.iOS .WaveRace #GridTable {background-image: url('graphics/games/waverace/wave.jpg');}
.WaveRace .Cell {width: 100%;}
.WaveRace .Chunk {background: none; width: 100%;}
.WaveRace .Item .Image, .Race .Item .Image {content-visibility: visible;}
.WaveRace .Grass, .WaveRace .Tree, .WaveRace .SkewMarker {--Grass: none;}

.WaveRace .RacePanelItem {--itemColor: transparent; width: 50px; height: 100px; margin-left: 50px; border: none;}
.WaveRace .RacePanelItem .Image {background-image: url('graphics/games/waverace/oildrum.png'); border-radius: 0px; filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.4)); transition: opacity 0.5s;}
.WaveRace .RacePanelItem .Text {padding-top: 32px; transition: opacity 0.5s;}
.WaveRace .RacePanelItem.Collected {background-color: transparent; box-shadow: none;}
.WaveRace .RacePanelItem.Collected .Image {filter: sepia(1) hue-rotate(65deg) saturate(4); opacity: 0;}
.WaveRace .RacePanelItem.Collected .Text {opacity: 0;}
.WaveRace .RacePanelItem.Collided {background-color: transparent;}
.WaveRace .RacePanelItem.Collided .Image {filter: sepia(1) hue-rotate(305deg) saturate(3) brightness(0.85) contrast(1.4); opacity: 0;}
.WaveRace .RacePanelItem.Collided .Text {opacity: 0;}

.WaveRace .FlagItem .Image {background-image: url('graphics/games/waverace/lifesaver.png'); transition: opacity 0.5s;}
.WaveRace .FlagItem.Collected {opacity: 0; filter: none;}
.WaveRace .Item {transform: translate(var(--left), var(--top)) scaleX(var(--scaleX)) rotateZ(var(--rotateZ)) rotateX(-20deg);}
.WaveRace .CollectedLetterItem {transform: translate(var(--left), var(--top)) scaleX(var(--scaleX)) rotateZ(var(--rotateZ)) rotateX(4deg);}
.WaveRace .Item .Body {top: -50px;}
.WaveRace .Item .Text {top: -50px;}


.CollectedLetterItem {--itemColor: red;}
    .CollectedLetterItem .Image {background-color: var(--itemColor); font-size: 24pt; font-family: var(--DefaultFontFamily); padding-top: 9px; text-shadow: 0px 0px 2px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;}
    .CollectedLetterItem.T {--itemColor: red;}
    .CollectedLetterItem.U {--itemColor: orange;}
    .CollectedLetterItem.R {--itemColor: gold;}
    .CollectedLetterItem.B {--itemColor: limegreen;}
    .CollectedLetterItem.O {--itemColor: blue;}
    .CollectedLetterItem.T .Image, .CollectedLetterItem.T.StatusIcon {background-image: url("graphics/items/turboboostred.png");}
    .CollectedLetterItem.U .Image, .CollectedLetterItem.U.StatusIcon {background-image: url("graphics/items/turboboostorange.png");}
    .CollectedLetterItem.R .Image, .CollectedLetterItem.R.StatusIcon {background-image: url("graphics/items/turboboostyellow.png");}
    .CollectedLetterItem.B .Image, .CollectedLetterItem.B.StatusIcon {background-image: url("graphics/items/turboboostgreen.png");}
    .CollectedLetterItem.O .Image, .CollectedLetterItem.O.StatusIcon {background-image: url("graphics/items/turboboostblue.png");}
    .RaceSeries .CollectedLetterItem .Body {width: 200%; height: 200%; margin-left: -50%; margin-top: -50%; xanimation: Vibrating 2s linear infinite; xanimation-play-state: var(--AnimationPlayState); transition: transform 1s ease-in, opacity 2s ease-in;}
    .RaceSeries .CollectedLetterItem .Image {animation: Vibrating 2s linear infinite; animation-play-state: var(--AnimationPlayState); background-color: transparent; padding-top: 26px; filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.5))}
    .RaceSeries .CollectedLetterItem.Collected .Image {animation: none;}
    .RaceSeries .CollectedLetterItem.Collected .Body {transform: rotateX(-46deg) translateY(-1400px); opacity: 0;}
    .RaceSeries .CollectedLetterItem.StatusIcon {background-color: transparent; width: 32px !important; height: 32px !important; margin-right: -3px; margin-top: -5px; padding-top: 5px; font-size: 12pt;}

@keyframes VibratingRocket {
    0% {transform: translate(0px, 0px);}
    20% {transform: translate(-5px, -5px);}
    40% {transform: translate(5px, 5px);}
    60% {transform: translate(-5px, 5px);}
    80% {transform: translate(5px, -5px);}
    100% {transform: translate(0px, 0px);}
}
    
.WaveRace #Player, .WaveRace .Car {width: 40px; margin-left: 5px; filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.4));}
.WaveRace #Player .Image {background-image: url('graphics/games/waverace/jetboat.png');}
.WaveRace #Player .Body {--RotateAngle: 10deg;}
.WaveRace .Car .Image {background-image: url('graphics/games/waverace/jetboat.png');}
.WaveRace .SkewMarker {display: none;}
.WaveRace .RedMarker, .WaveRace .LeftSkewLeftRedMarker, .WaveRace .RightSkewLeftRedMarker, .WaveRace .RightSkewRightRedMarker, .WaveRace .LeftSkewRightRedMarker {xdisplay: none; background-image: none; background-color: transparent; background-size: contain; background-position: center center; background-repeat: no-repeat;}
.Harbour .RedMarker .Image, .Harbour .BlackSkewMarker .Image {display: block; background-image: url('graphics/games/waverace/buoy.png'); background-size: contain; background-repeat: no-repeat;}
.Harbour .RedMarker.Exploding .Image, .Harbour .BlackSkewMarker.Exploding .Image {background-image: none;}
.WaveRace .SkewMarker:not(.Exploding) .Image  {display: none;}
.WaveRace .LeftMarker, .WaveRace .LeftSkewRightRedMarker, .WaveRace .LeftSkewLeftRedMarker {x--rotateZ: -20deg;}
.WaveRace .RightMarker, .WaveRace .RightSkewRightRedMarker, .WaveRace .RightSkewLeftRedMarker {x--rotateZ: 20deg;}

.WaveRace .Ramp .Image {background-image: url('graphics/games/waverace/ramp.jpg');}

.WaveRace .Boulder .Image {background-image: url('graphics/games/waverace/lightboulder.png');}
.RockyCoast .Tree .Image {background-image: url('graphics/games/waverace/lightboulder.png');}
.RockyCoast .Tree .Body {background: none;}