.templateContainer,
.templateContainer * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hide {
    display: none !important;
}

.bold {
    font-weight: bold;
}

.templateContainer {
    width: 97%;
    height: 95%;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    background-color: #373737;

    position: fixed;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-flow: column nowrap;
}

#loadingScreenPaytable {
    opacity: 0.98;
    height: 94% !important;
}

.templateHTMLMainWrapper hr {
    display: none;
}

.templateContainer::before {
    content: '';

    position: fixed;
    top: -25vh;
    left: -25vw;
    width: 150vw;
    height: 150vh;
    z-index: -99;

    background-color: rgba(0, 0, 0, .85);
}

html {
    font-size: 100%;
}

.templateContainer h1 {
    font-size: 1.3rem;
}

.templateContainer h2 {
    font-size: 0.95rem;
}

.templateContainer h3 {
    font-size: 0.80rem;
}

.templateContainer p,
.templateContainer a,
.templateContainer td,
.templateTable th, .templateHTMLMainWrapper th
.templateContainer li {
    font-size: 0.85rem;
}

.templateContainer a{
    color: #ffffff;
}

.templateContainer a:hover{
    color: #cccccc;
}

.templateHeader {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.templateMain {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#loadingScreenPaytable .templateCloseBtn {
    display: none;
}

.templateCloseBtn {
    width: 24vw;
    height: 5vw;
    background-color: #880000;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;

    max-width: 100px;
    max-height: 30px;

    position: absolute;
    top: 0;
    right: 0;

    transition: background 0.3s;
}

.templateCloseBtn:hover {
    background-color: #aa0000;
}

.templatePlayButton {
    background-color: #2f80ed;
    border-radius: 10px;
    border-style: none;
    box-shadow: none;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    font-weight: 500;
    width: 35%;
    height: 60%;
    min-width: 25px;
    min-height: 25px;
    max-width: 500px;
    max-height: 120px;
    letter-spacing: normal;
    line-height: 1.5;
    outline: none;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    vertical-align: top;
    white-space: nowrap;
}

.templatePlayButton:hover {
    background-color: #1366d6;
    box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
    opacity: 1;
    transition-duration: .35s;
}

.templateHeader {
    background-color: #444444;
    padding:5% 10% 2%;
    text-align: center;
}

.templateGameLogo {
    display: block;
    width: 80%;

    margin: 0 auto;
}

.templateMain {
    background-color: #373737;
    text-align: center;
    overflow-y:scroll;

    flex-grow: 99;
}

.templateMain::-webkit-scrollbar {
    width: 7px;
}

.templateMain::-webkit-scrollbar-thumb {
    background-color: #bec1c033;
    border-radius: 7px;
}

.templateMain::-webkit-scrollbar-thumb:hover {
    background-color: #bec1c066;
    cursor: pointer;
}

.templateMain::-webkit-scrollbar-track {
    background-color: #68686862;
}

.templateMainWrapper {
    width: 92%;
    background-color: #232323;
    margin: 3% auto;
    padding: 20px 20px 15px;
    border-radius: 10px;
    box-shadow: #141617 0px 0px 10px 0;
}

.templateSection {
    text-align: center;
    margin: 0 auto;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.templateSection > *, .templateHTMLMainWrapper > *,
.templatePayoutsContainer > * {
    margin: 15px auto;
}

.templateTable, .templateHTMLMainWrapper table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.templateTable tr, .templateHTMLMainWrapper tr,
.templateTable td, .templateHTMLMainWrapper td,
.templateTable th, .templateHTMLMainWrapper th {
    border: 1px solid white;
}

.templateTable td, .templateHTMLMainWrapper td
.templateTable th, .templateHTMLMainWrapper th {
    padding: 3px;
}

.templateList, .templateHTMLMainWrapper ul {
    list-style: none;
    text-align: center;
}

.templateList li, .templateHTMLMainWrapper li {
    font-size: 0.85rem;
    margin: 2px 0;
    padding-left: 1em;
    text-indent: -1em;
}

.templateList li::before, .templateHTMLMainWrapper li::before {
    font-size: 0.85rem;
    content: "\2022";
    padding-right: 5px;
    margin-top: -5px;
    height: 100%;
  }

.templateSymbol {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.templateSymbolContainer {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    max-width: 367px;
}

.templateSymbolStakes {
    padding: 0 5px 0 15px;
    text-align: left;
    white-space: nowrap;
}

.templateSymbolImg {
    width: 80%;
    flex-shrink: 0;
}

.templateSymbolImg > img {
    display: block;
    width: 100%;
}

.templateImage {
    position: relative;
    width: 100%;
}

.templateStakesCount {
    color: #009BFF;
    margin-right: 5px;
}

.templateHTMLMainWrapper h2 {
    font-size: 1.3rem;
}

.templateHTMLMainWrapper h3 {
    font-size: 0.95rem;
}

.templateHTMLMainWrapper h4 {
    font-size: 0.80rem;
}

.templatePayoutsContainer {
    display: flex;
    flex-flow: row wrap;
    max-width: 1220px;
    justify-content: space-around;
}

.templatePayoutsContainer > * {
    flex-basis: 30%;
}

.templateSymbolContainer .templateSymbolImg {
    width: 16.4vw;
    max-width: 190px;
}

.templateSymbolContainer .templateSymbolStakes {
    flex-grow: 1;
}

@media only screen and (min-width: 540px) {
    html{
        font-size: 110%;
    }

    .templateGameLogo {
        width: 75%;
    }

    .templateTable td, .templateHTMLMainWrapper td,
    .templateTable th, .templateHTMLMainWrapper th {
        padding: 5px;
    }

    .templateCloseBtn {
        width: 20vw;
    }
}

@media only screen and (min-width: 750px) {
    html{
        font-size: 125%;
    }

    .templateHeader {
        padding: 1% 10% 1%;
    }

    .templateGameLogo {
        width: 70%;
    }

    .templateSection > *, .templateHTMLMainWrapper > * {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .templateMainWrapper {
        padding: 20px 30px 15px;
    }

    .templateCloseBtn {
        width: 15vw;
        height: 4vw;
    }
}

@media only screen and (min-width: 1024px) {
    html{
        font-size: 140%;
    }

    .templateHeader {
        padding: 0.5% 10% 0.5%;
    }

    .templateSection > *, .templateHTMLMainWrapper > *,
    .templatePayoutsContainer > * {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .templateCloseBtn {
        width: 12vw;
    }

    .templateTable td, .templateHTMLMainWrapper td,
    .templateTable th, .templateHTMLMainWrapper th {
        padding: 8px;
    }

    .templateGameLogo {
        width: 65%;
    }

    .templateMain::-webkit-scrollbar {
        width: 12px;
    }
    
    .templateMain::-webkit-scrollbar-thumb {
        border-radius: 12px;
    }
}

@media only screen and (min-width: 1440px) {
    html{
        font-size: 160%;
    }

    .templateGameLogo {
        width: 60%;
    }

    .templateCloseBtn {
        width: 8vw;
    }

    .templateTable td, .templateHTMLMainWrapper td,
    .templateTable th, .templateHTMLMainWrapper th {
        padding: 8px;
    }
}

@media only screen and (min-width: 1620px) {
    html{
        font-size: 180%;
    }

    .templateGameLogo {
        width: 55%;
    }

    .templateCloseBtn {
        font-size: 20px;
    }
}

.templateHeader .templateLogo {
    width: auto;
    height: 15vh;
}
html
{
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: pan-y;
}
 
body
{
    width: 100vw;
    height: 100vh;
    min-height: 100%;
    overflow: hidden;
    touch-action: pan-y;
    background: linear-gradient(180deg,#282831,#561f2c);
    margin: 0px;
    padding: 0px;
    color:#FFF;

    -ms-user-select: none;
    -ms-touch-select: none;
    -ms-touch-action: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
    user-select: none;

    -webkit-touch-callout: none;
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: auto;

    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

@media (orientation: landscape) {
    body {
        background: #000000;
    }
}

@media (orientation: portrait) {
    body {
        background: #ffffff;
    }
}

#gameContainer{
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    top:0;
    left:0;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(180deg,#282831,#561f2c);
}

#mainGame{
    position: absolute;
    height: 100%;
    width: 100%;
}
/*  
#gameDisplay
{
    height: 100%;
    position: relative;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    opacity: 0;
} */
 
.centre
{
    position: absolute;
    left: 50%;
    top: 50%;
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* #loadingScreen{
    position: fixed;
    display: block;
    width: 500px;
    height: 109px;
    top:50%;
    left:50%;
    opacity:0;

    animation: loadingScreenFadeIn 0.5s linear;
    -webkit-animation: loadingScreenFadeIn 0.5s linear;
    -moz-animation: loadingScreenFadeIn 0.5s linear;
    -o-animation: loadingScreenFadeIn 0.5s linear;
    -ms-animation: loadingScreenFadeIn 0.5s linear;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
} */

.loadingScreenFadeOutAnim{

    animation: loadingScreenFadeOut 0.4 linear !important;
    -webkit-animation: loadingScreenFadeOut 0.4 linear !important;
    -moz-animation: loadingScreenFadeOut 0.4 linear !important;
    -o-animation: loadingScreenFadeOut 0.4 linear !important;
    -ms-animation: loadingScreenFadeOut 0.4 linear !important;

    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
    -o-animation-fill-mode: forwards !important;
    -ms-animation-fill-mode: forwards !important;
}

@keyframes loadingScreenFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes loadingScreenFadeOut {
    to {
        opacity: 0;
    }

    100%{
        opacity: 0;
    }
}

#loadingScreenText{
    display: block;
    width: 500px;
    height: 109px;
    margin:-55px -250px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABtCAMAAABgFmOHAAAAq1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Nr6iZAAAAOHRSTlMAYlLJceSAj60DNihDGw3y1138u4ifTughsljdR+6kZcGVPHYX9c00EQq2+dIu4al7xgYCQJltaeg4lx4AAAlVSURBVHja7MGBAAAAAICg/akXqQIAAAAAAAAAAAAAAACA2bHPJUWBKAzDBxUds4yKATGNOYfZ2e/+r2wlyIFuVJwddq3S55clVRJe7G54eXl5eQRfXXp5MjowoJenogOv6k9GB17Vn4wO15RenoSOsxy9PAcdr+jPRscr+j+QPRzpguOFb+Oj4Z7o80Q7EUZrkqWpnT+xppLQRuTKaQlBe0auvMLf6sOi9CsnypquSBvkKXzp9nENya/UdvapzO1jFWkFOhE26Z/NLN0w3XX3k2RykeGz8culF5VGQ620dmuSzVSdQmw+KC4a7opefEe4Hll63if2AaBArhYkQ68ZAjbdTuBXbBm6YoMEnbXhypOHd9Gyj1VWIYu0yVwoB7oom1LBWlMSKBuwSoJEU3RJ1sGAYqLhh6IrZFG8Tyzlj/4GSY6LiDYF/pXb0TWgT54tHF1iozFs45F9rOHRwzctv+iC9hhBrTn55FRxH3npuJcjkmxRpXhoeOjowK87oicBfPJ8sJTPKQNHiiJHZ/0jMenmKu/ftlUDtvGUPDvY1NagNliYPCr61IAPEjUB9Uhx0HBv9Gz+rFS1zm6Ud6xLkaM38sW83/xadHQjR+/g5E263GjRWR6OCd0RnfUpxB6W+jBLlpGygqVDrgEs3Sk5hi1YduS3OO9XnIiaFAMNcvTotkC5RCxidPkGvhodqajRF7CsyVMBggW6/MUd0VmaJFWcLGbEEmMAhv+UJv54awMnv8nHAKBTUFblA4+v+f3R374bPXs9etlQN40lzsqjaNFz0pvkhPAPHQYHD8XbnQf9wKZG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);
    background-repeat: no-repeat;
}

#loadingScreenArrows{
    display: block;
    position: absolute;
    width: 86px;
    height: 86px;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    margin: 9px 19px;

    animation: loadingScreenArrowRotate 2.5s linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: loadingScreenArrowRotate 2.5s linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin:  50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: loadingScreenArrowRotate 2.5s linear;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin:  50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: loadingScreenArrowRotate 2.5s linear;
    -o-animation-iteration-count: infinite;
    -o-transform-origin:  50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: loadingScreenArrowRotate 2.5s linear;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin:  50% 50%;
    -ms-animation-fill-mode: forwards
}


@-ms-keyframes loadingScreenArrowRotate { 
    from { 
        -ms-transform: rotate(0deg); 
    } to { 
        -ms-transform: rotate(360deg); 
    }
}
@-moz-keyframes loadingScreenArrowRotate { 
    from { 
        -moz-transform: rotate(0deg); 
    } to { 
        -moz-transform: rotate(360deg); 
    }
}
@-webkit-keyframes loadingScreenArrowRotate { 
    from { 
        -webkit-transform: rotate(0deg); 
    } to { 
        -webkit-transform: rotate(360deg); 
    }
}
@keyframes loadingScreenArrowRotate { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(360deg); 
    }
}

.loadingScreenPauseAnimation{
    animation-play-state: paused !important;
}
#loadingScreen {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#preloadingScreenCanvas {
    position:absolute;
    top:0;
    left:0;
    z-index: 9999;
    pointer-events: none;
}

#logoAnimVideo {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    pointer-events: none;
}

#gameContainer::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg,#282831,#561f2c);
    z-index: -1;
    transition: opacity 0.5s linear;
    opacity: 0;
}

#gameContainer.preloadingBgAnim::before {
    opacity: 1;
}

#loadingScreen,
.logo-wrapper {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

#componentsWrapper{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.logo-wrapper {
    top: 55vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    width: 45vw;
    height: 30vh;
    z-index: 9999;
}

.logo-wrapper-extra-message {
    top: 45vh;
}

.arrows-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 11.9vw;
    height: 11.9vw;
}

#progressBarContainer{

    width: 340px;
    height: 20px;
}

#progressBarContainer::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .5; 
    z-index: -1;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAByCAYAAAClSCP7AAADUElEQVR4nO3dMU8bSRiA4W/ttYmhAJbCQRRI/IA01x5FCtpEkQ6li5T7YelPpCEtRSJx3ekoEn7DJRQ2BQIjI9mnDxHpkiq6kNhjPY+0hRHF7GzxauT1TAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPOkKv1ptFqtLz43TZN/eBoR+xHxOCIezmxwAMy7TxHxNiIOIuJwOBxO/jveyWRSzANcqKA3TfNLRLyaTqePbm5uIq98GNPpdKZjBGD+VFV125BOp3N7VVX1PiJ+Hw6Hf38erKD/RJ+D3jTNk4j4YzweP7i6uirqIQAwW9mS5eXl6Ha71xHxfDgcvglB/7nyIdytzP8cjUYPRqNR6bcEwIz0er28Muq/5kq9pKC3vuF/5trGxkarqqpXuTIXcwC+R3Yke5Jdyb6UNJnFBz0inuR35peXl3MwFABKlz3Jrty9YF2M4oNeVdX+eDz24hsA9yJ7kl2pquq3kma0+KC3Wq3H+TY7ANyX7Er2paQJXYSgb3qjHYD7lF3JvpQ0qYsQ9DkYBQCLprS+FF/Ddrv9sa7rORgJAIsiu5J9Kel2FiHob3MzAAC4L9mV7EtJE1p80Ou6PlhdXc2Jn4PRAFC67El2pa7r1yXdSvFB73Q6b5aWlt73+/05GA0ApcueZFc6nc5hSbdS/LJ2MBhMt7a2/lpZWXmRC3YbzADwf2XM+/3+dbvdfnp6evpPSXucFB/0PC3n7Ozs4/b29oe1tbVnvV6vvri4cDgLAN8sT1vb2dmJzc3N67qun5+cnLyLu01mSrFQx6fu7u7eHp86mUweDQaDOD8/v93tR9wB+Fr2o9vtxvr6ep4Lkp8/RMTL4+Njx6fOwte/E9zb22vd7b+7HxG5y8/D0u8RgB/mU0Tk2+wHEXF4dHT0RcEtCAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEoSEf8CrJ7H8ixPk5sAAAAASUVORK5CYII=);
    background-position: center;
    background-size: cover;
}

#progressBarWrapper {
    margin-top: 6px;
    margin-left: 32px;
    width: 279px;
}

#progressBar {
    /* width: 279px; */
    position: relative;
    width: 4%;
    overflow: hidden;

    display: flex;
    flex-flow: row nowrap;
}

#progressBar::before,
#progressBar::after {
    content: '';
    display: block;
    width: 6px;
    height: 12px;
    background-position: center;
    background-size: cover;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAMCAYAAABBV8wuAAAAnElEQVQYlWP8f82VAQzYVAQYGBhqGBgYkhgYGN6ygAVZRDQZ/n3Yy8DAIAlRxSAIkuBh+PNmO5IgRC3D79eFDAwM8siCEIk/L8PRBUGA8f9xxt9gBeg6Pn75j00DA8uX7ww3GRgYtDEkXrxlWMnAwNCEYceqZgYeBgaGK+guA1n65dJdBk8GBgZkD0Jco6fMcH3xTgYteJAwMLwFAO6cJNOwL3k8AAAAAElFTkSuQmCC);
}

#progressBar::after {
    transform: scaleX(-1);
}

#loadingScreen #progressBarWrapper {
    position: absolute;
}

#loadingScreen #progressBarContainer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#gameContainer > #progressBarContainer {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (orientation: portrait){
    
    #gameContainer > #progressBarContainer{
        bottom: 19%;
    }
}

.progressBarMiddle {
    height: 12px;
    /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAMCAYAAABFohwTAAAAUElEQVQImV3OMQqAMBBE0a/sZT2u1tHKIqKCQkDQmFgowd3p/qumyq65gZpvQtpKvBCXfyNcs4E4GTi9hj1kDeFQjfjVwDAa6HoDrSOV68ADL7AZuIDwNLMAAAAASUVORK5CYII='); */
    /* background-position: center; */
    /* background-size: contain; */
    margin-left: -1px;
    flex-grow: 99;
}

.progressBarMiddleGraphic {
    height: 12px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAMCAYAAABFohwTAAAAUElEQVQImV3OMQqAMBBE0a/sZT2u1tHKIqKCQkDQmFgowd3p/qumyq65gZpvQtpKvBCXfyNcs4E4GTi9hj1kDeFQjfjVwDAa6HoDrSOV68ADL7AZuIDwNLMAAAAASUVORK5CYII=);
    /* background-position: center; */
    /* background-size: contain; */
    width: calc(100% - 8px);

    position: absolute;
    top: 0;
    left: 4px;
}

.extraMessageContainer {
    padding: 10px 20px;
    background-color: #000;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.extraMessageImg {
    width: 12%;
    min-width: 68px;
    flex-basis: 12%;
}

.extraMessage {
    margin: 0 0 0 20px;
    width: 88%;
    flex-basis: 88%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #a3a5a2;
    text-align: center;
}

@media only screen and (max-width: 900px) {

    .extraMessageImg {
        width: 20%;
        flex-basis: 20%;
    }

    .extraMessage {
        width: 80%;
        flex-basis: 80%;
    }
}

@media only screen and (max-width: 1200px) {

    .extraMessage {
        font-size: 1.5vw;
    }
}

@media only screen and (max-width: 600px) {

    .extraMessage {
        font-size: 9px;
    }
}

.arrows-rotate {
    animation: rotateArrows 3s linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    -webkit-animation: rotateArrows 3s linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: rotateArrows 3s linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-fill-mode: forwards;
    -o-animation: rotateArrows 3s linear;
    -o-animation-iteration-count: infinite;
    -o-animation-fill-mode: forwards;
    -ms-animation: rotateArrows 3s linear;
    -ms-animation-iteration-count: infinite;
    -ms-animation-fill-mode: forwards;
}

@media only screen and (orientation: portrait) {
    .logo-wrapper {
        width: 90vw;
        height: 60vh;
        top: 74%;
    }

    .arrows-wrapper {
        width: 24vw;
        height: 24vw;
    }
}

.arrow1,
.arrow2,
.arrow3,
.arrow4,
.dotCom,
.player,
.symbol4,
.the {
    position: absolute;
    left: 0;
    top: 0;
    width: 45vw;
    height: 30vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    transform: translate(9999px);
}

@media only screen and (orientation: portrait) {
    .arrow1,
    .arrow2,
    .arrow3,
    .arrow4,
    .dotCom,
    .player,
    .symbol4,
    .the {
        width: 90vw;
        height: 60vh;
    }
}

#arrow1 {
    background-image: url(data:image/png;base64,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);
}

#arrow2 {
    background-image: url(data:image/png;base64,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);
}

#arrow3 {
    background-image: url(data:image/png;base64,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);
}

#arrow4 {
    background-image: url(data:image/png;base64,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);
}

#symbol4 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAABkCAYAAAB99XB/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAJiSURBVHhe7d1tjdtAFIbRQCiEQiiEQlkIhVAGhVAohVAIhVAI6XsbW1qtNl+2tb4enSNdyWPPSPn15FfiEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAmM7n85fMp2kJwNFNYf+b+S3wAAN4FfaZwAMcWSL+NuwzgQc4osT7WthnAg9wJIn2vbDPvk5HAOgswX407EXcAbpLrJ8JexF3gM4S6mfDXsQdoKtEeknYi7gDdJRALw17EXeAbhLnNWEv4g7QScK8NuxF3AG6SJS3CHsRd4AOEuStwl7EHWBvifGWYS/iDrCnhHjrsBdxB9hLIvxs2Gvvn8vlTeIOsIcEeEnY68yv/6vbxB3goyW+i8I+nRV3gG4S3sVhL7kWd4BOEt1VYS9ZiztAFwnu6rCX3BN3gA4S203CXnJf3AH2ltC+XHr7sKthL3km7gB7SmQ3DXvJc3EH2EsCu3nYS/aIO8AeEtdnw/7RxB/gWYnnj0tD2xJ3gCUS0J+XjrYk7gBLJaJdAy/uAGskpB0DL+4AayWm3QIv7gBbSFA7BV7cAbaSqH7LfF85j7yso75I3js7z+fpIwHQQcLsR0wAo0m4xR1gNAm3uAOMJuEWd4DRJNziDjCahFvcAUaTcIs7wGgS7kfifvd/4QFoJOG+F/eXaSsAR5F434q7sAMcUQJ+Le7CDnBUifh7cRd2gCNLyN/GXdgBji4xfx13YQcYQYI+x13YAUaRqFfchR1gJAm7F20AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACbOZ3+AagCoonj1wDBAAAAAElFTkSuQmCC);
}

#the {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAABkCAYAAAB99XB/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAMESURBVHhe7dQxqixLEkTBt/9N/1GO4lwoJZqmqTFTT+Cp5T8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABe5b8v6sk/yqN00tQoPer0o5oG+I7+nq/oyT/Ko3TS1Cg96vSjmgb4jv6er+jJP8qjdNLUKD3q9KOaBviO/p6v6Mk/yqN00tQoPer0o5oG+D39U6N00tQonTQ1So86HSWA9+mfG6WTpkbppKlRetTpKAG8T//cKJ00NUonTY3So05HCeB9+udG6aSpUTppapQedTpKAO/TPzdKJ02N0klTo/So01ECeJ/+uVE6aWqUTpoapUedjhLA+/TPjdJJU6N00tQoPep0lADep39ulE6aGqWTpkbpUaejBPA+/XOjdNLUKJ00NUqPOh0lgPfpnxulk6ZG6aSpUXrU6SgBvE//3CidNDVKJ02N0qNORwngffrnRumkqa/oyUedflTTAL+nf2qUTpr6ip581OlHNQ3we/qnRumkqa/oyUedflTTAL+nf2qUTpr6ip581OlHNQ3we/qnRumkqVE6aWqUHnU6SgDv0z83SidNjdJJU6P0qNNRAnif/rlROmlqlE6aGqVHnY4SwPv0z43SSVOjdNLUKD3qdJQA3qd/bpROmhqlk6ZG6VGnowTwPv1zo3TS1CidNDVKjzodJYD36Z8bpZOmRumkqVF61OkoAbxP/9wonTQ1SidNjdKjTkcJ4H3650bppKlROmlqlB51OkoA79M/N0onTY3SSVOj9KjTUQJ4n/65UTppapROmhqlR52OEsD79M+N0klTo3TS1Cg96nSUAN6nf26UTpoapZOmRulRpx/XPMBv6Y8apZOmRumkqVF61OnHNQ/wW/qjRumkqVE6aWqUHnX6cc0D/Jb+qFE6aWqUTpoapUedflzzAL+lP2qUTpoapZOmRulRpx/XPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPw/+ffvfxKV8+3SLbMQAAAAAElFTkSuQmCC);
}

#player {
    background-image: url(data:image/png;base64,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);
}

#dotCom {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAABkCAYAAAB99XB/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAO/SURBVHhe7dxr1dNAEAbgTwISkIAEJCABCUhAAhKQgAQkIAEJOCjvtDshadJ+beBw6/OcsyfZy3D5M9lOt3kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDf6nA4vEh7k/Z+1t6mvRhLrsq6l2P93vjXd6x9VW10AThXCTXtY9o1H9I2E2+Np+2Ob5n/nPZ+dK8aaz+MLgBzSZC1A/6W1r6kzXfe1W91v0jQ6Z/HHxN0Wu/gr8bPnZYcvo3uRVlTnxDK5zEEQEtyrB13J+a6vh5TCzU+5su7MdzxX4+jp+st8ZsJPmP1kGhvx/CmzNengKMxBEBLbuxSSiXeq/Xrmk9bJN30O74S+3Mll/kOf1V6yVjV+tvFHXnm5g+k8nJMAZCkWEmyvRnDN0vMPH5zx34u66pUU1all4xVCWdu82GT8f4z2t3/doD/VpJiJ8mvY+guidsVn/W96148ENKvWn3pGv3HMbWQ8Z7v601fwAI8hEqKp9y4nUSfk7hd8VnfSXyRlNPv2n2VZ+oBUO38y9uq3ZdK7O9Ot4dPYxqAJMXNJHurxO2Kr/WnsB9xuZ9KPKPftfzpy9uSfo/Xp4Yp0Y9pAJIUfza5fzqF/5Lk3on6WOLJtY86TiWf3PcD4Fivz3XxQAAgkhM7ye76IVDi9pZlVg+F3K9KLLnvh8/xC9Nctx4KXcrxS1WAkoT4p79QnU655L7LLfPE3Ucjjwk/107k09HH3PcD4Oq5eICHkYQ4P8p4d3JMTJdOyk3HEbOud+iLo5DpL3bpLf1O6L1rX3x5mv5qNw/w8JIU7/kRU9XF65TKfOc8j9/9I6YxVhY/SEq/k3c7Pz7Znx68hgB4TEmAtVM/P1pYY707rsR76fUBveMuU40+97fG9/HGsjjdkv702oExNMnQ/NPFqvyTsY7dVVoC+Kcl+VWSrF13tfMEXwmyE3SpNbVjrlbvcJnPrXbIGXsuvvpt6+/v2vrm7jvj0/HHMbQw5pyYAR5Pcl/Vx2vnXG31LpaMVfLvJLql4i7WtTNX8dPLvDYc49NWpZsxXjZP7WS8yzmbZZ+M98PjplcgAPxXkvwqST5XV68kXTvp3nlXuzlpZm3FVx18Hl9/3mZiLpmrB0/V8y++AKzmx+1K5ur/VfEX/w4AAAAAAAAAAAAAAAAAAAAAAADgr/b09B24G0PwZSmIGQAAAABJRU5ErkJggg==);
}

.arrow-appear1 {
    animation: animationFrames1 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames1 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames1 1.5s linear;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames1 1.5s linear;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames1 1.5s linear;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes rotateArrows {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateArrows {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes animationFrames1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.arrow-appear2 {
    animation: animationFrames2 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames2 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames2 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames2 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames2 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFrames2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    17% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    17% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.arrow-appear3 {
    animation: animationFrames3 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames3 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames3 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames3 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames3 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFrames3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    34% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    34% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.arrow-appear4 {
    animation: animationFrames4 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames4 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames4 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames4 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames4 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFrames4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    51% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    51% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.symbol4-appear {
    animation: animationFramesSymbol4 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesSymbol4 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesSymbol4 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesSymbol4 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesSymbol4 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesSymbol4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesSymbol4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.the-appear {
    animation: animationFramesThe 1.6s linear;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesThe 1.6s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesThe linear 1.6s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesThe linear 1.6s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesThe linear 1.6s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesThe {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
        transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesThe {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.player-appear {
    animation: animationFramesPlayer 1.8s linear;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesPlayer 1.8s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesPlayer linear 1.8s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesPlayer linear 1.8s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesPlayer linear 1.8s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesPlayer {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
        transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesPlayer {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.dotCom-appear {
    animation: animationFramesDotCom 1.92s linear;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesDotCom 1.92s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesDotCom linear 1.92s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesDotCom linear 1.92s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesDotCom linear 1.92s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesDotCom {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.05) scaleY(1.05);
        transform: translate(0) scaleX(1.05) scaleY(1.05);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesDotCom {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.05) scaleY(1.05);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.thePlayerLogo-disappear {
    animation: loadingFadeOut 1s linear;
    animation-fill-mode: forwards;
    -webkit-animation: loadingFadeOut 1s linear;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: loadingFadeOut linear 1s;
    -moz-animation-fill-mode: forwards;
    -o-animation: loadingFadeOut linear 1s;
    -o-animation-fill-mode: forwards;
    -ms-animation: loadingFadeOut linear 1s;
    -ms-animation-fill-mode: forwards;
}

@keyframes loadingFadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes loadingFadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    to {
        opacity: 0;
    }
}

.loadingScreenFadeOutAnim {
    animation: loadingScreenFadeOut 0.5s linear !important;
    -webkit-animation: loadingScreenFadeOut 0.5s linear !important;
    -moz-animation: loadingScreenFadeOut 0.5s linear !important;
    -o-animation: loadingScreenFadeOut 0.5s linear !important;
    -ms-animation: loadingScreenFadeOut 0.5s linear !important;

    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
    -o-animation-fill-mode: forwards !important;
    -ms-animation-fill-mode: forwards !important;
}

.fadeInAnim {
    animation: fadeIn 0.5s linear;
    -webkit-animation: fadeIn 0.5s linear;
    -moz-animation: fadeIn 0.5s linear;
    -o-animation: fadeIn 0.5s linear;
    -ms-animation: fadeIn 0.5s linear;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
}

.hide {
    visibility: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loadingScreenFadeOut {
    to {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.preloadingCharacter {
    position: absolute;
    z-index: -3;
    transform-origin: bottom left;
    height: 100vh;
    top: 2vmin;
    right: 0;
}

@media only screen and (orientation: portrait) {

    .preloadingCharacter {
        top: 23vmin;
        height: 80vh;
        left: calc(5vmin - 100px);
    }
}

@media only screen and (max-height: 300px) and (orientation: portrait) {

    .preloadingCharacter {
        left: calc(5vmin - 50px);
    }
}
#templateContainer {
    /* width: 100%; */
    /* height: 100%; */
    /* overflow: hidden; */
}

.templateContainer,
.templateContainer * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hide {
    display: none !important;
}

.bold {
    font-weight: bold;
}

.templateContainer {
    width: 97%;
    height: 91%;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    background-color: #373737;

    position: fixed;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-flow: column nowrap;
}

.templateHTMLMainWrapper hr {
    display: none;
}

.templateContainer::before {
    content: '';

    position: fixed;
    top: -25vh;
    left: -25vw;
    width: 150vw;
    height: 150vh;
    z-index: -99;

    background-color: rgba(0, 0, 0, .7);
}

html {
    font-size: 100%;
}

.templateContainer h1 {
    font-size: 1.3rem;
}

.templateContainer h2 {
    font-size: 0.95rem;
}

.templateContainer h3 {
    font-size: 0.80rem;
}

.templateContainer p,
.templateContainer a,
.templateContainer td,
.templateTable th, .templateHTMLMainWrapper th
.templateContainer li {
    font-size: 0.85rem;
}

.templateContainer a{
    color: #ffffff;
}

.templateContainer a:hover{
    color: #cccccc;
}

.templateHeader {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.templateMain {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.templateCloseBtn {
    width: 24vw;
    height: 5vw;
    background-color: #880000;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;

    max-width: 100px;
    max-height: 30px;

    position: absolute;
    top: 0;
    right: 0;

    transition: background 0.3s;
}

.templateCloseBtn:hover {
    background-color: #aa0000;
}

.templateHeader {
    background-color: #444444;
    /* padding:5% 10% 2%; */
    text-align: center;
}

.templateGameLogo {
    display: block;
    width: 80%;

    margin: 0;
}

.templateMain {
    background-color: #373737;
    text-align: center;
    overflow-y:scroll;

    flex-grow: 99;
}

.localGameLogo{

    min-height: 75px;
}

.templateMain::-webkit-scrollbar {
    width: 7px;
}

.templateMain::-webkit-scrollbar-thumb {
    background-color: #bec1c033;
    border-radius: 7px;
}

.templateMain::-webkit-scrollbar-thumb:hover {
    background-color: #bec1c066;
    cursor: pointer;
}

.templateMain::-webkit-scrollbar-track {
    background-color: #68686862;
}

.templateMainWrapper {
    width: 92%;
    background-color: #232323;
    margin: 3% auto;
    padding: 20px 20px 15px;
    border-radius: 10px;
    box-shadow: #141617 0px 0px 10px 0;
}

.templateSection {
    text-align: center;
    margin: 0 auto;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.templateSection > *, .templateHTMLMainWrapper > * {
    margin: 15px auto;
}

.templateTable, .templateHTMLMainWrapper table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.templateTable tr, .templateHTMLMainWrapper tr,
.templateTable td, .templateHTMLMainWrapper td,
.templateTable th, .templateHTMLMainWrapper th {
    border: 1px solid white;
}

.templateTable td, .templateHTMLMainWrapper td
.templateTable th, .templateHTMLMainWrapper th {
    padding: 3px;
}

.templateList, .templateHTMLMainWrapper ul {
    list-style: none;
    text-align: center;
}

.templateList li, .templateHTMLMainWrapper li {
    font-size: 0.85rem;
    margin: 2px 0;
    padding-left: 1em;
    text-indent: -1em;
}

.templateList li::before, .templateHTMLMainWrapper li::before {
    font-size: 0.85rem;
    content: "\2022";
    padding-right: 5px;
    margin-top: -5px;
    height: 100%;
  }

.templateSymbol {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.templateSymbolStakes {
    padding: 0 5px;
    text-align: left;
    white-space: nowrap;
}

.templateSymbolImg {
    width: 80%;
    flex-shrink: 0;
}

.templateSymbolImg > img {
    display: block;
    width: 100%;
}

.templateImage {
    position: relative;
    width: 100%;
}

.templateStakesCount {
    color: #009BFF;
    margin-right: 5px;
}

.wildSymbolContainer {

    display:flex;
    justify-content: center;
    flex-basis: 100%;
}

.wildSymbolContainer > img {

    position: relative;
    max-width: 99%;
}

.paytableWildSymbol {
    max-width:240px;
}

.templateSectionCol-1,
.templateSectionCol-2,
.templateSectionCol-3 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.arrowsContainer, .fakeArrowsContainer {

    position: relative;
    width: 20.4vw;
    max-width: 100%;
    flex-basis: 100%;
    display:flex;
    justify-content: space-around;
    align-items: center;
    z-index:2;
}

.fakeArrowsContainer {

    transform: translate(0,-100%);
    z-index:1;
}

.paytableArrow, .paytableArrowFake {

    flex-basis: 25%;
    width: 25%
}

.paytableArrow {

    cursor: pointer;
    transition: transform 0.2s;
    flex-basis: 20%;
    flex-shrink: 1;
    min-width: 0;
}

.paytableArrow:hover {

    transform: scale(1.15);
    transform-origin: 50% 50%;
}

.dotsContainer{

    flex-basis: 100%;
}

.paytableDot {

    flex-basis: 15%;
    width: 15%
}

.paytableDotVisible {

    visibility: visible;
}

.paytableWildName{

    /* max-width: 200px;
    width: clamp(100px, 20vw, 200px); */

    flex-basis: 60%;
    flex-shrink: 1;
    min-width: 0;
}

.templateSectionCol-1  > *{

    flex-basis: 98%
}

.templateSectionCol-2 > * {
    flex-basis: 48%;
}

.templateSectionCol-3 > * {
    flex-basis: 30%;
}

.templateHTMLMainWrapper h2 {
    font-size: 1.3rem;
}

.templateHTMLMainWrapper h3 {
    font-size: 0.95rem;
}

.templateHTMLMainWrapper h4 {
    font-size: 0.80rem;
}

.chooseWildContainer {

    flex-basis: 60%;
    max-width: 240px;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mainWildContainer {
    
    display: flex;
    justify-content: space-evenly;
    width: 51vw;
    max-width: 700px;
    min-width: 230px;
}

.wildDescriptionContainer {

    /* width: 30.6vw;
    max-width: 360px; */
    flex-basis: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.wildDescriptionContainer > p {

    margin-top: 5px;
    margin-bottom: 5px;
     font-size: /*0.85rem;*/clamp(12px, 2vw, 22px); 
}

.yellowHeader {

    color: yellow;
}

#gameRules > main > div > h2 {
    
    color: yellow;
}

#gameRules > main > div > h3 {

    color: rgb(255, 255, 131)
}

.localPlayButton:not(:hover) .playButtonPaytableOff {
    animation: opacityChangeReverse 1s infinite;
}

.localPlayButton:not(:hover) .playButtonPaytableOn {
    animation: opacityChange 1s infinite;
}

@keyframes opacityChange {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@keyframes opacityChangeReverse {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}

.localPlayButton {
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    cursor: pointer;
    position: relative;
    width: 45%;
    min-width: 90px;
    max-width: 450px;
    max-height: 100%;
    margin-left: 10%;
    margin-right: 10px;
}

.playButtonPaytableOn, .playButtonPaytableOff {
    position: absolute;
    top: 47.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.localPlayButton:hover .playButtonPaytableOn {
    opacity: 1;
}

.localPlayButton:hover .playButtonPaytableOff {
    opacity: 0;
}

.playButtonPaytableText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.playButtonPaytableOn img, .playButtonPaytableOff img, .playButtonPaytableText img {
    max-width: 100%;
    max-height: 100%;
}

@media only screen and (min-width: 540px) {
    html{
        font-size: 110%;
    }

    .templateGameLogo {
        width: 75%;
    }

    .templateTable td, .templateHTMLMainWrapper td,
    .templateTable th, .templateHTMLMainWrapper th {
        padding: 5px;
    }

    .templateCloseBtn {
        width: 20vw;
    }
}

@media only screen and (min-width: 750px) {
    html{
        font-size: 125%;
    }

    .templateHeader {
        /* padding: 3% 10% 2%; */
    }

    .templateGameLogo {
        width: 70%;
    }

    .templateSection > *, .templateHTMLMainWrapper > * {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .templateMainWrapper {
        padding: 20px 30px 15px;
    }

    .templateCloseBtn {
        width: 15vw;
        height: 4vw;
    }
}

@media only screen and (min-width: 1024px) {
    html{
        font-size: 140%;
    }

    .templateHeader {
        /* padding: 2% 10% 1%; */
    }

    .templateSection > *, .templateHTMLMainWrapper > * {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .templateCloseBtn {
        width: 12vw;
    }

    .templateTable td, .templateHTMLMainWrapper td,
    .templateTable th, .templateHTMLMainWrapper th {
        padding: 8px;
    }

    .templateGameLogo {
        width: 65%;
    }

    .templateMain::-webkit-scrollbar {
        width: 12px;
    }
    
    .templateMain::-webkit-scrollbar-thumb {
        border-radius: 12px;
    }
}

@media only screen and (min-width: 1440px) {
    html{
        font-size: 160%;
    }

    .templateGameLogo {
        width: 60%;
    }

    .templateCloseBtn {
        width: 8vw;
    }

    .templateTable td, .templateHTMLMainWrapper td,
    .templateTable th, .templateHTMLMainWrapper th {
        padding: 8px;
    }

    .localPlayButton {
        width: 40%;
    }
}

@media only screen and (min-width: 1620px) {
    html{
        font-size: 180%;
    }

    .templateGameLogo {
        width: 55%;
    }

    .templateCloseBtn {
        font-size: 20px;
    }
}

@media only screen and (orientation: landscape) and (max-height: 600px){

    .chooseWildContainer > *{

        flex-basis: 60%;
    }

    .mainWildContainer{

        width: 80vw;
        justify-content: center;
    }

    .localGameLogo{

        width: 235.38px;
        height: 100px;
    }
}

@media only screen and (orientation: portrait) and (max-width: 800px){

    .chooseWildContainer > *{

        flex-basis: 90%;
    }
}
html
{
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: pan-y;
}
 
body
{
    width: 100vw;
    height: 100vh;
    min-height: 100%;
    overflow: hidden;
    touch-action: pan-y;
    background: linear-gradient(180deg,#282831,#561f2c);
    margin: 0px;
    padding: 0px;
    color:#FFF;

    -ms-user-select: none;
    -ms-touch-select: none;
    -ms-touch-action: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
    user-select: none;

    -webkit-touch-callout: none;
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: auto;

    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

@media (orientation: landscape) {
    body {
        background: #000000;
    }
}

@media (orientation: portrait) {
    body {
        background: #ffffff;
    }
}

#gameContainer{
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    top:0;
    left:0;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(180deg,#282831,#561f2c);
    /* background-color: #000000; */
}

#mainGame{
    position: absolute;
    height: 100%;
    width: 100%;
}
/*  
#gameDisplay
{
    height: 100%;
    position: relative;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    opacity: 0;
} */
 
.centre
{
    position: absolute;
    left: 50%;
    top: 50%;
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* #loadingScreen{
    position: fixed;
    display: block;
    width: 500px;
    height: 109px;
    top:50%;
    left:50%;
    opacity:0;

    animation: loadingScreenFadeIn 0.5s linear;
    -webkit-animation: loadingScreenFadeIn 0.5s linear;
    -moz-animation: loadingScreenFadeIn 0.5s linear;
    -o-animation: loadingScreenFadeIn 0.5s linear;
    -ms-animation: loadingScreenFadeIn 0.5s linear;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
} */

.loadingScreenFadeOutAnim{

    animation: loadingScreenFadeOut 0.4 linear !important;
    -webkit-animation: loadingScreenFadeOut 0.4 linear !important;
    -moz-animation: loadingScreenFadeOut 0.4 linear !important;
    -o-animation: loadingScreenFadeOut 0.4 linear !important;
    -ms-animation: loadingScreenFadeOut 0.4 linear !important;

    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
    -o-animation-fill-mode: forwards !important;
    -ms-animation-fill-mode: forwards !important;
}

@keyframes loadingScreenFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes loadingScreenFadeOut {
    to {
        opacity: 0;
    }

    100%{
        opacity: 0;
    }
}

#loadingScreenText{
    display: block;
    width: 500px;
    height: 109px;
    margin:-55px -250px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABtCAMAAABgFmOHAAAAq1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Nr6iZAAAAOHRSTlMAYlLJceSAj60DNihDGw3y1138u4ifTughsljdR+6kZcGVPHYX9c00EQq2+dIu4al7xgYCQJltaeg4lx4AAAlVSURBVHja7MGBAAAAAICg/akXqQIAAAAAAAAAAAAAAACA2bHPJUWBKAzDBxUds4yKATGNOYfZ2e/+r2wlyIFuVJwddq3S55clVRJe7G54eXl5eQRfXXp5MjowoJenogOv6k9GB17Vn4wO15RenoSOsxy9PAcdr+jPRscr+j+QPRzpguOFb+Oj4Z7o80Q7EUZrkqWpnT+xppLQRuTKaQlBe0auvMLf6sOi9CsnypquSBvkKXzp9nENya/UdvapzO1jFWkFOhE26Z/NLN0w3XX3k2RykeGz8culF5VGQ620dmuSzVSdQmw+KC4a7opefEe4Hll63if2AaBArhYkQ68ZAjbdTuBXbBm6YoMEnbXhypOHd9Gyj1VWIYu0yVwoB7oom1LBWlMSKBuwSoJEU3RJ1sGAYqLhh6IrZFG8Tyzlj/4GSY6LiDYF/pXb0TWgT54tHF1iozFs45F9rOHRwzctv+iC9hhBrTn55FRxH3npuJcjkmxRpXhoeOjowK87oicBfPJ8sJTPKQNHiiJHZ/0jMenmKu/ftlUDtvGUPDvY1NagNliYPCr61IAPEjUB9Uhx0HBv9Gz+rFS1zm6Ud6xLkaM38sW83/xadHQjR+/g5E263GjRWR6OCd0RnfUpxB6W+jBLlpGygqVDrgEs3Sk5hi1YduS3OO9XnIiaFAMNcvTotkC5RCxidPkGvhodqajRF7CsyVMBggW6/MUd0VmaJFWcLGbEEmMAhv+UJv54awMnv8nHAKBTUFblA4+v+f3R374bPXs9etlQN40lzsqjaNFz0pvkhPAPHQYHD8XbnQf9wKZG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);
    background-repeat: no-repeat;
}

#loadingScreenArrows{
    display: block;
    position: absolute;
    width: 86px;
    height: 86px;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    margin: 9px 19px;

    animation: loadingScreenArrowRotate 2.5s linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: loadingScreenArrowRotate 2.5s linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin:  50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: loadingScreenArrowRotate 2.5s linear;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin:  50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: loadingScreenArrowRotate 2.5s linear;
    -o-animation-iteration-count: infinite;
    -o-transform-origin:  50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: loadingScreenArrowRotate 2.5s linear;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin:  50% 50%;
    -ms-animation-fill-mode: forwards
}


@-ms-keyframes loadingScreenArrowRotate { 
    from { 
        -ms-transform: rotate(0deg); 
    } to { 
        -ms-transform: rotate(360deg); 
    }
}
@-moz-keyframes loadingScreenArrowRotate { 
    from { 
        -moz-transform: rotate(0deg); 
    } to { 
        -moz-transform: rotate(360deg); 
    }
}
@-webkit-keyframes loadingScreenArrowRotate { 
    from { 
        -webkit-transform: rotate(0deg); 
    } to { 
        -webkit-transform: rotate(360deg); 
    }
}
@keyframes loadingScreenArrowRotate { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(360deg); 
    }
}

.loadingScreenPauseAnimation{
    animation-play-state: paused !important;
}

/* local styles for htmlTemplate */

.localGameLogo {

    max-height: 130px;
    max-width: 306px;
}

.templateHeader{

    padding-top: 10px;
}

.templateMultiplierPanel {
    width: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.templateMultiplierX {
    width: 6.5vw;
    max-width: 65px;

    left: 16%;
    top: -9%;
    position: absolute;
    z-index: 99;
}

.templateMultiplierPanelNum {
    width: 5vw;
    max-width: 50px;

    top: 10%;
    left: 2%;
    position: relative;
    z-index: 99;
}

.templateMultiplierPanelNumSecond {
    top: 0;
    left: 60%;
    position: absolute;
    z-index: 99;
}

.templateMultiplierContainer {
    width: 24vw;
    max-width: 244px;
}

.templateScatter {
    width: 45%;
    justify-content: center;
}

.templateScatterTwoContainer {
    width: 70%;
    max-width: 430px;
}

.templateScatterTwo {
    flex-direction: column;
}

.templateScatterTwo .templateSymbolImg {
    margin-bottom: 10px;
}

.templateScatter .templateSymbolImg {
    width: 20vw;
    max-width: 200px;
}

.templateScatterImgWrapper {
    position: relative;
}

.templateScatterImgPlus,
.templateScatterImgNum0,
.templateScatterImgNum2,
.templateScatterPlus20 {
    position: absolute;
}

.templateScatterImgPlus {
    top: 36%;
    left: 30%;
    width: 12% !important;
}

.templateScatterImgNum2 {
    top: 37%;
    left: 42%;
    width: 13% !important;
}

.templateScatterImgNum0 {
    top: 37%;
    left: 56%;
    width: 12.5% !important;
}

.templateBigReelLogo img {
    width: 100%;
}

.templateBigReelLogo {
    width: 95%;
    max-width: 380px;
}

.templateScatterPlus20 {
    top: 0;
}

.templateSymbolDouble {
    max-width: 640px;
    justify-content: space-around;
    width: 70%;
}

.templateSymbolDouble .templateSymbolImg {
    width: 20vw;
    max-width: 240px;
}

.templateSmallSymbolsContainer {
    max-width: 1220px;
    justify-content: space-around;
    row-gap: .5rem;
}

.templateSmallSymbol  {
    justify-content: center;
    max-width: 367px;
}

.templateSymbolClover, .templateSymbolWell{

    max-width: initial;
    flex-basis: 50%;
}

.templateSmallSymbol .templateSymbolImg {
    width: 16.4vw;
    max-width: 190px;
}

.templateSmallSymbol .templateSymbolStakes {
    flex-grow: 1;
    font-weight: bold;
}

.templateSymbolStakes{

    display: grid;
}

.templateSymbolClover .templateSymbolStakes, .templateSymbolWell .templateSymbolStakes{

    flex-grow: 0;
}

.templateKongSymbol .templateSymbolImg{

    max-width: 235px;
    width: 20vw;
}

.templateKongSymbol, .templateWildSymbol{

    flex-basis: 36%;
    max-width: initial;
}

.templateWildSymbol{

    flex-basis: 60%;
    min-height: 190px;
}

.templateKongSymbol .templateSymbolStakes, .templateWildSymbol .templateSymbolStakes{

    height: 8vw;
}

.templateFlamingoSymbol .templateSymbolImg{

    transform: scale(0.85, 0.85);
    -webkit-transform: scale(0.85, 0.85);
}

.templateFlamingoSymbol img{

     margin-top: min(2.80vw, 24.8px);
 }

.templateModesContainer {
    max-width: 400px;
}

.templateScreenMode {
    flex-basis: 48%;
    width: 48%;
}

.templateScreenModeImg {
    position: relative;
    z-index: 2;
    width: 100%;
}

.templateScreenGlow {
    width: 128%;

    position: absolute;
    top: -8%;
    right: -14%;
}

.templateVerticalArrow,
.templateHorizontalArrow {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.templateVerticalArrow {
    width: 20%;
}

.templateHorizontalArrow {
    width: 30%;
}

.templateYellow {
    color: #ffff00;
}

.templateLink4TP * {
    margin: 0;
}

.template4TPLogo {
    margin-right: 10px;
    width: 5%;
    min-width: 22px;
    max-width: 40px;
}

.template4TPLogo > img {
    width: 100%;
}

.templateLink4TP {
    display: flex;
    flex-flow: row nowrap;

    justify-content: center;
}

.parentFlexPaytable {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    justify-content: space-around;
}

.childFlexPaytable {
    width: 50%;
    padding: 15px;
    max-width: 400px;
}

.bonusScatterPaytable {

    width: 30%;
    max-width: 230px;
    margin: 0;
}

.paytableScreenshot{

    width: min(40%, 352px);
    min-width: 200px;
    margin: 0;
}

/* .childFlexPaytable:nth-child(odd) {
    padding-top: 30px;
} */

.boldTextPaytable {
    font-weight: bold;
}

.marginTopPaytable {
    margin-top:15px;
}

.coolBonusNamePaytable {
    font-weight: bold;
    color:rgb(52, 255, 245)
}

.mediumBonusNamePaytable {
    font-weight: bold;
    color:rgb(220, 255, 24)
}

.hotBonusNamePaytable {
    font-weight: bold;
    color:rgb(255, 145, 1)
}

.extraHotBonusNamePaytable {
    font-weight: bold;
    color:rgb(212, 0, 0)
}

.scatterImagePaytable {
    width: 50%;
    max-width: 100px;
}

.gamerulesBonusesTable, .gamerulesBonusesTable tr, .gamerulesBonusesTable td {
    border: none;
}

.responsiveImg{

    width: 10vw;
    min-width: 70px;
}

.responsiveImgScatter{

    width: 10vw;
    min-width: 70px;
    max-width: 200px;
}

.paytableTitle, .helpTitle{

    color:#ffff00
}
.listContainer ul {
    display: inline-block;
    text-align: left;
}

div.listContainer{

    text-align: center;
    max-width: 1000px;
}

.screenshotImage{

    width: clamp(200px, 18vw, 360px);
}

.imageWithWildTextContainer, .imageWithScatterTextContainer{

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.imageWithWildTextContainer > img, .imageWithScatterTextContainer > img{

    width: 8vw;
    min-width: 100px;
}

@media only screen and (max-width: 879px){

    .templateWildSymbol{

        flex-basis: 85%;
        min-height: 130px;
    }

    .templateKongSymbol .templateSymbolStakes{

        height: 3vw;
    }
}

@media only screen and (min-width: 540px){

    .imageWithWildTextContainer > p, .imageWithScatterTextContainer > p {

        width: 25vw;
        min-width: 300px;
    }
}

@media only screen and (max-width: 540px){

    .imageWithWildTextContainer > p, .imageWithScatterTextContainer > p {

        min-width: 45vw;
    }

    .localGameLogo {

        max-height: 97px;
        max-width: 230px;
    }
}
#loadingScreen {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#preloadingScreenCanvas {
    position:absolute;
    top:0;
    left:0;
    z-index: 9999;
    pointer-events: none;
}

#logoAnimVideo {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    pointer-events: none;
}

#gameContainer::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg,#282831,#561f2c);
    z-index: -1;
    transition: opacity 0.5s linear;
    opacity: 0;
}

#gameContainer.preloadingBgAnim::before {
    opacity: 1;
}

#loadingScreen,
.logo-wrapper {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

#componentsWrapper{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.logo-wrapper {
    top: 55vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    width: 45vw;
    height: 30vh;
    z-index: 9999;
}

.logo-wrapper-extra-message {
    top: 45vh;
}

.arrows-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 11.9vw;
    height: 11.9vw;
}

#progressBarContainer{

    width: 340px;
    height: 20px;
}

#progressBarContainer::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .5; 
    z-index: -1;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAByCAYAAAClSCP7AAADUElEQVR4nO3dMU8bSRiA4W/ttYmhAJbCQRRI/IA01x5FCtpEkQ6li5T7YelPpCEtRSJx3ekoEn7DJRQ2BQIjI9mnDxHpkiq6kNhjPY+0hRHF7GzxauT1TAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPOkKv1ptFqtLz43TZN/eBoR+xHxOCIezmxwAMy7TxHxNiIOIuJwOBxO/jveyWRSzANcqKA3TfNLRLyaTqePbm5uIq98GNPpdKZjBGD+VFV125BOp3N7VVX1PiJ+Hw6Hf38erKD/RJ+D3jTNk4j4YzweP7i6uirqIQAwW9mS5eXl6Ha71xHxfDgcvglB/7nyIdytzP8cjUYPRqNR6bcEwIz0er28Muq/5kq9pKC3vuF/5trGxkarqqpXuTIXcwC+R3Yke5Jdyb6UNJnFBz0inuR35peXl3MwFABKlz3Jrty9YF2M4oNeVdX+eDz24hsA9yJ7kl2pquq3kma0+KC3Wq3H+TY7ANyX7Er2paQJXYSgb3qjHYD7lF3JvpQ0qYsQ9DkYBQCLprS+FF/Ddrv9sa7rORgJAIsiu5J9Kel2FiHob3MzAAC4L9mV7EtJE1p80Ou6PlhdXc2Jn4PRAFC67El2pa7r1yXdSvFB73Q6b5aWlt73+/05GA0ApcueZFc6nc5hSbdS/LJ2MBhMt7a2/lpZWXmRC3YbzADwf2XM+/3+dbvdfnp6evpPSXucFB/0PC3n7Ozs4/b29oe1tbVnvV6vvri4cDgLAN8sT1vb2dmJzc3N67qun5+cnLyLu01mSrFQx6fu7u7eHp86mUweDQaDOD8/v93tR9wB+Fr2o9vtxvr6ep4Lkp8/RMTL4+Njx6fOwte/E9zb22vd7b+7HxG5y8/D0u8RgB/mU0Tk2+wHEXF4dHT0RcEtCAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEoSEf8CrJ7H8ixPk5sAAAAASUVORK5CYII=);
    background-position: center;
    background-size: cover;
}

#progressBarWrapper {
    margin-top: 6px;
    margin-left: 32px;
    width: 279px;
}

#progressBar {
    /* width: 279px; */
    position: relative;
    width: 4%;
    overflow: hidden;

    display: flex;
    flex-flow: row nowrap;
}

#progressBar::before,
#progressBar::after {
    content: '';
    display: block;
    width: 6px;
    height: 12px;
    background-position: center;
    background-size: cover;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAMCAYAAABBV8wuAAAAnElEQVQYlWP8f82VAQzYVAQYGBhqGBgYkhgYGN6ygAVZRDQZ/n3Yy8DAIAlRxSAIkuBh+PNmO5IgRC3D79eFDAwM8siCEIk/L8PRBUGA8f9xxt9gBeg6Pn75j00DA8uX7ww3GRgYtDEkXrxlWMnAwNCEYceqZgYeBgaGK+guA1n65dJdBk8GBgZkD0Jco6fMcH3xTgYteJAwMLwFAO6cJNOwL3k8AAAAAElFTkSuQmCC);
}

#progressBar::after {
    transform: scaleX(-1);
}

#loadingScreen #progressBarWrapper {
    position: absolute;
}

#loadingScreen #progressBarContainer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#gameContainer > #progressBarContainer {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (orientation: portrait){
    
    #gameContainer > #progressBarContainer{
        bottom: 19%;
    }
}

.progressBarMiddle {
    height: 12px;
    /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAMCAYAAABFohwTAAAAUElEQVQImV3OMQqAMBBE0a/sZT2u1tHKIqKCQkDQmFgowd3p/qumyq65gZpvQtpKvBCXfyNcs4E4GTi9hj1kDeFQjfjVwDAa6HoDrSOV68ADL7AZuIDwNLMAAAAASUVORK5CYII='); */
    /* background-position: center; */
    /* background-size: contain; */
    margin-left: -1px;
    flex-grow: 99;
}

.progressBarMiddleGraphic {
    height: 12px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAMCAYAAABFohwTAAAAUElEQVQImV3OMQqAMBBE0a/sZT2u1tHKIqKCQkDQmFgowd3p/qumyq65gZpvQtpKvBCXfyNcs4E4GTi9hj1kDeFQjfjVwDAa6HoDrSOV68ADL7AZuIDwNLMAAAAASUVORK5CYII=);
    /* background-position: center; */
    /* background-size: contain; */
    width: calc(100% - 8px);

    position: absolute;
    top: 0;
    left: 4px;
}

.extraMessageContainer {
    padding: 10px 20px;
    background-color: #000;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.extraMessageImg {
    width: 12%;
    min-width: 68px;
    flex-basis: 12%;
}

.extraMessage {
    margin: 0 0 0 20px;
    width: 88%;
    flex-basis: 88%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #a3a5a2;
    text-align: center;
}

@media only screen and (max-width: 900px) {

    .extraMessageImg {
        width: 20%;
        flex-basis: 20%;
    }

    .extraMessage {
        width: 80%;
        flex-basis: 80%;
    }
}

@media only screen and (max-width: 1200px) {

    .extraMessage {
        font-size: 1.5vw;
    }
}

@media only screen and (max-width: 600px) {

    .extraMessage {
        font-size: 9px;
    }
}

.arrows-rotate {
    animation: rotateArrows 3s linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    -webkit-animation: rotateArrows 3s linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: rotateArrows 3s linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-fill-mode: forwards;
    -o-animation: rotateArrows 3s linear;
    -o-animation-iteration-count: infinite;
    -o-animation-fill-mode: forwards;
    -ms-animation: rotateArrows 3s linear;
    -ms-animation-iteration-count: infinite;
    -ms-animation-fill-mode: forwards;
}

@media only screen and (orientation: portrait) {
    .logo-wrapper {
        width: 90vw;
        height: 60vh;
        top: 74%;
    }

    .arrows-wrapper {
        width: 24vw;
        height: 24vw;
    }
}

.arrow1,
.arrow2,
.arrow3,
.arrow4,
.dotCom,
.player,
.symbol4,
.the {
    position: absolute;
    left: 0;
    top: 0;
    width: 45vw;
    height: 30vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    transform: translate(9999px);
}

@media only screen and (orientation: portrait) {
    .arrow1,
    .arrow2,
    .arrow3,
    .arrow4,
    .dotCom,
    .player,
    .symbol4,
    .the {
        width: 90vw;
        height: 60vh;
    }
}

#arrow1 {
    background-image: url(data:image/png;base64,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);
}

#arrow2 {
    background-image: url(data:image/png;base64,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);
}

#arrow3 {
    background-image: url(data:image/png;base64,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);
}

#arrow4 {
    background-image: url(data:image/png;base64,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);
}

#symbol4 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAABkCAYAAAB99XB/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAJiSURBVHhe7d1tjdtAFIbRQCiEQiiEQlkIhVAGhVAohVAIhVAI6XsbW1qtNl+2tb4enSNdyWPPSPn15FfiEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAmM7n85fMp2kJwNFNYf+b+S3wAAN4FfaZwAMcWSL+NuwzgQc4osT7WthnAg9wJIn2vbDPvk5HAOgswX407EXcAbpLrJ8JexF3gM4S6mfDXsQdoKtEeknYi7gDdJRALw17EXeAbhLnNWEv4g7QScK8NuxF3AG6SJS3CHsRd4AOEuStwl7EHWBvifGWYS/iDrCnhHjrsBdxB9hLIvxs2Gvvn8vlTeIOsIcEeEnY68yv/6vbxB3goyW+i8I+nRV3gG4S3sVhL7kWd4BOEt1VYS9ZiztAFwnu6rCX3BN3gA4S203CXnJf3AH2ltC+XHr7sKthL3km7gB7SmQ3DXvJc3EH2EsCu3nYS/aIO8AeEtdnw/7RxB/gWYnnj0tD2xJ3gCUS0J+XjrYk7gBLJaJdAy/uAGskpB0DL+4AayWm3QIv7gBbSFA7BV7cAbaSqH7LfF85j7yso75I3js7z+fpIwHQQcLsR0wAo0m4xR1gNAm3uAOMJuEWd4DRJNziDjCahFvcAUaTcIs7wGgS7kfifvd/4QFoJOG+F/eXaSsAR5F434q7sAMcUQJ+Le7CDnBUifh7cRd2gCNLyN/GXdgBji4xfx13YQcYQYI+x13YAUaRqFfchR1gJAm7F20AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACbOZ3+AagCoonj1wDBAAAAAElFTkSuQmCC);
}

#the {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAABkCAYAAAB99XB/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAMESURBVHhe7dQxqixLEkTBt/9N/1GO4lwoJZqmqTFTT+Cp5T8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABe5b8v6sk/yqN00tQoPer0o5oG+I7+nq/oyT/Ko3TS1Cg96vSjmgb4jv6er+jJP8qjdNLUKD3q9KOaBviO/p6v6Mk/yqN00tQoPer0o5oG+D39U6N00tQonTQ1So86HSWA9+mfG6WTpkbppKlRetTpKAG8T//cKJ00NUonTY3So05HCeB9+udG6aSpUTppapQedTpKAO/TPzdKJ02N0klTo/So01ECeJ/+uVE6aWqUTpoapUedjhLA+/TPjdJJU6N00tQoPep0lADep39ulE6aGqWTpkbpUaejBPA+/XOjdNLUKJ00NUqPOh0lgPfpnxulk6ZG6aSpUXrU6SgBvE//3CidNDVKJ02N0qNORwngffrnRumkqa/oyUedflTTAL+nf2qUTpr6ip581OlHNQ3we/qnRumkqa/oyUedflTTAL+nf2qUTpr6ip581OlHNQ3we/qnRumkqVE6aWqUHnU6SgDv0z83SidNjdJJU6P0qNNRAnif/rlROmlqlE6aGqVHnY4SwPv0z43SSVOjdNLUKD3qdJQA3qd/bpROmhqlk6ZG6VGnowTwPv1zo3TS1CidNDVKjzodJYD36Z8bpZOmRumkqVF61OkoAbxP/9wonTQ1SidNjdKjTkcJ4H3650bppKlROmlqlB51OkoA79M/N0onTY3SSVOj9KjTUQJ4n/65UTppapROmhqlR52OEsD79M+N0klTo3TS1Cg96nSUAN6nf26UTpoapZOmRulRpx/XPMBv6Y8apZOmRumkqVF61OnHNQ/wW/qjRumkqVE6aWqUHnX6cc0D/Jb+qFE6aWqUTpoapUedflzzAL+lP2qUTpoapZOmRulRpx/XPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPw/+ffvfxKV8+3SLbMQAAAAAElFTkSuQmCC);
}

#player {
    background-image: url(data:image/png;base64,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);
}

#dotCom {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAABkCAYAAAB99XB/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAO/SURBVHhe7dxr1dNAEAbgTwISkIAEJCABCUhAAhKQgAQkIAEJOCjvtDshadJ+beBw6/OcsyfZy3D5M9lOt3kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDf6nA4vEh7k/Z+1t6mvRhLrsq6l2P93vjXd6x9VW10AThXCTXtY9o1H9I2E2+Np+2Ob5n/nPZ+dK8aaz+MLgBzSZC1A/6W1r6kzXfe1W91v0jQ6Z/HHxN0Wu/gr8bPnZYcvo3uRVlTnxDK5zEEQEtyrB13J+a6vh5TCzU+5su7MdzxX4+jp+st8ZsJPmP1kGhvx/CmzNengKMxBEBLbuxSSiXeq/Xrmk9bJN30O74S+3Mll/kOf1V6yVjV+tvFHXnm5g+k8nJMAZCkWEmyvRnDN0vMPH5zx34u66pUU1all4xVCWdu82GT8f4z2t3/doD/VpJiJ8mvY+guidsVn/W96148ENKvWn3pGv3HMbWQ8Z7v601fwAI8hEqKp9y4nUSfk7hd8VnfSXyRlNPv2n2VZ+oBUO38y9uq3ZdK7O9Ot4dPYxqAJMXNJHurxO2Kr/WnsB9xuZ9KPKPftfzpy9uSfo/Xp4Yp0Y9pAJIUfza5fzqF/5Lk3on6WOLJtY86TiWf3PcD4Fivz3XxQAAgkhM7ye76IVDi9pZlVg+F3K9KLLnvh8/xC9Nctx4KXcrxS1WAkoT4p79QnU655L7LLfPE3Ucjjwk/107k09HH3PcD4Oq5eICHkYQ4P8p4d3JMTJdOyk3HEbOud+iLo5DpL3bpLf1O6L1rX3x5mv5qNw/w8JIU7/kRU9XF65TKfOc8j9/9I6YxVhY/SEq/k3c7Pz7Znx68hgB4TEmAtVM/P1pYY707rsR76fUBveMuU40+97fG9/HGsjjdkv702oExNMnQ/NPFqvyTsY7dVVoC+Kcl+VWSrF13tfMEXwmyE3SpNbVjrlbvcJnPrXbIGXsuvvpt6+/v2vrm7jvj0/HHMbQw5pyYAR5Pcl/Vx2vnXG31LpaMVfLvJLql4i7WtTNX8dPLvDYc49NWpZsxXjZP7WS8yzmbZZ+M98PjplcgAPxXkvwqST5XV68kXTvp3nlXuzlpZm3FVx18Hl9/3mZiLpmrB0/V8y++AKzmx+1K5ur/VfEX/w4AAAAAAAAAAAAAAAAAAAAAAADgr/b09B24G0PwZSmIGQAAAABJRU5ErkJggg==);
}

.arrow-appear1 {
    animation: animationFrames1 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames1 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames1 1.5s linear;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames1 1.5s linear;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames1 1.5s linear;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes rotateArrows {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateArrows {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes animationFrames1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.arrow-appear2 {
    animation: animationFrames2 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames2 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames2 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames2 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames2 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFrames2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    17% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    17% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.arrow-appear3 {
    animation: animationFrames3 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames3 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames3 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames3 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames3 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFrames3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    34% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    34% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.arrow-appear4 {
    animation: animationFrames4 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFrames4 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFrames4 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFrames4 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFrames4 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFrames4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
        transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    51% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
        transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

@-webkit-keyframes animationFrames4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-180deg) scaleX(10) scaleY(10);
    }
    0.01% {
        opacity: 0;
        -webkit-transform: translate(0) rotate(-179.9deg) scaleX(10) scaleY(10);
    }
    51% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    /* to {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scaleX(1) scaleY(1);
    } */
}

.symbol4-appear {
    animation: animationFramesSymbol4 1.5s linear;
    animation-iteration-count: 1;
    transform-origin: 13.3% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesSymbol4 1.5s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 13.3% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesSymbol4 linear 1.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 13.3% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesSymbol4 linear 1.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 13.3% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesSymbol4 linear 1.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 13.3% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesSymbol4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
        transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesSymbol4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.2) scaleY(1.2);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.the-appear {
    animation: animationFramesThe 1.6s linear;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesThe 1.6s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesThe linear 1.6s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesThe linear 1.6s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesThe linear 1.6s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesThe {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
        transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesThe {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.player-appear {
    animation: animationFramesPlayer 1.8s linear;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesPlayer 1.8s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesPlayer linear 1.8s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesPlayer linear 1.8s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesPlayer linear 1.8s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesPlayer {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
        transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesPlayer {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.1) scaleY(1.1);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.dotCom-appear {
    animation: animationFramesDotCom 1.92s linear;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    -webkit-animation: animationFramesDotCom 1.92s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: animationFramesDotCom linear 1.92s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    -o-animation: animationFramesDotCom linear 1.92s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    -ms-animation: animationFramesDotCom linear 1.92s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
}

@keyframes animationFramesDotCom {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
        transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.05) scaleY(1.05);
        transform: translate(0) scaleX(1.05) scaleY(1.05);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
        transform: translate(0) scaleX(1) scaleY(1);
    }
}

@-webkit-keyframes animationFramesDotCom {
    0% {
        opacity: 0;
        -webkit-transform: translate(0) scaleX(10) scaleY(10);
    }
    48% {
        opacity: 0;
    }
    88% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    93% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1.05) scaleY(1.05);
    }
    97% {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0) scaleX(1) scaleY(1);
    }
}

.thePlayerLogo-disappear {
    animation: loadingFadeOut 1s linear;
    animation-fill-mode: forwards;
    -webkit-animation: loadingFadeOut 1s linear;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: loadingFadeOut linear 1s;
    -moz-animation-fill-mode: forwards;
    -o-animation: loadingFadeOut linear 1s;
    -o-animation-fill-mode: forwards;
    -ms-animation: loadingFadeOut linear 1s;
    -ms-animation-fill-mode: forwards;
}

@keyframes loadingFadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes loadingFadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    to {
        opacity: 0;
    }
}

.loadingScreenFadeOutAnim {
    animation: loadingScreenFadeOut 0.5s linear !important;
    -webkit-animation: loadingScreenFadeOut 0.5s linear !important;
    -moz-animation: loadingScreenFadeOut 0.5s linear !important;
    -o-animation: loadingScreenFadeOut 0.5s linear !important;
    -ms-animation: loadingScreenFadeOut 0.5s linear !important;

    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
    -o-animation-fill-mode: forwards !important;
    -ms-animation-fill-mode: forwards !important;
}

.fadeInAnim {
    animation: fadeIn 0.5s linear;
    -webkit-animation: fadeIn 0.5s linear;
    -moz-animation: fadeIn 0.5s linear;
    -o-animation: fadeIn 0.5s linear;
    -ms-animation: fadeIn 0.5s linear;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
}

.hide {
    visibility: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loadingScreenFadeOut {
    to {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.preloadingCharacter {
    position: absolute;
    z-index: -3;
    transform-origin: bottom left;
    height: 100vh;
    top: 2vmin;
    right: 0;
}

@media only screen and (orientation: portrait) {

    .preloadingCharacter {
        top: 23vmin;
        height: 80vh;
        left: calc(5vmin - 100px);
    }
}

@media only screen and (max-height: 300px) and (orientation: portrait) {

    .preloadingCharacter {
        left: calc(5vmin - 50px);
    }
}