/***************************************
 * FONTS
***************************************/

@font-face { 
    font-family: "chunk"; src: url("../fonts/chunk.ttf");
}

.chunk {
    font-family: "chunk" !important;
    font-size: 9vh;
    font-style: normal;
    color: #38924b;
}

@font-face { 
    font-family: "minya"; src: url("../fonts/minya.ttf");
}

.minya {
    font-family: "minya" !important;
    font-size: 12vh;
    font-style: normal;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-shadow: 3px 3px 0 white;
    -webkit-text-stroke: 2px #e70000;
}



/************************************
 * COMMON
************************************/

:root {
    --menu-scaler: 1.0;
}


@media (min-aspect-ratio : 65/100) and (orientation : portrait) {
    :root {
        --menu-scaler: 0.7;
    }
}


html, body {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow: hidden;
	width: 100%;
    height: 100%;
    max-height: 100%;
    min-width: 100%;
	margin: 0;
	padding: 0;
    background-color: darkgrey;
	background-size: 100% 100%;
}


@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    body {
        width: 100%;
    }

    #greenStitch {
        height: 100%;
    }


}


body > img {
	opacity: 0;
	width: 1px;
	height: 2px;
}


html.error, 
html.error body {
	overflow: visible !important;
	width: 100%;
	height: auto;
	min-height: 100%;
	max-height: none;
}


button {
	background: transparent;
	border: 0;
	outline: transparent;
	padding: 0;
}


.absolute {
	display: block;
	position: absolute;
}


.icon,
.paddedHeight {
	display: block;
	height: auto;
}


.icon::after,
.paddedHeight::after {
	display: block;
	content: "";
}


.button {
	cursor: pointer;
	z-index: 100;
}


.noEvents {
	pointer-events: none;
}


.absolute-fill {
    position: absolute;
    height: 100%;
    width: 100%;
}


.hidden {
	display: none !important;
}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

    touch-action: none;
}


/***************************************
 * UI
***************************************/

#particleCanvas, #uiContainer, #ARGameIFrame, #logo, #rotateLogo, #frame, #timeDisplay, #time,
#elfSelectScreen, #selectBackground, #selectedElf, #wavingElf, #selectedElfHead, #chosenElfHead, #elfName, #selectScreenBorder, #greenStitch, 
#chooseElf, #leftArrow, #rightArrow, #readyButton, #greenBar, #leftDecorations, #rightDecorations, #topDecorations,
#welcomeScreen, #welcomeBackground, #welcomeSign, #villageScreen, #villageBackground, #tapHouseSign, #house1, #house2, #house3, #house4, #house5,
#houseName1, #houseName2, #houseName3, #houseName4, #houseName5, #houseReplay1, #houseReplay2, #houseReplay3, #houseReplay4, #houseReplay5,
#prankFactory, #brickBackground, #standingElf, #standingElfOutro, #prankItem, #prankEffect, #conveyorBelt, #prankButtons, #prankButton1, #prankButton2, #prankButton3,
#trainingAcademy, #pondBackground, #trainingCounter, #elf1, #elf1Circle, #elf2, #elf2Circle, #elf3, #elf3Circle, #elf4, #elf4Circle, #elf5,
#elf5Circle, #elf6, #elf6Circle, #elf7, #elf7Circle, #elf8, #elf8Circle, #elf9, #elf9Circle, #elf10, #elf10Circle,
#fartAttack, #fartBackground, #redLine, #fartCloud1, #fartCloud2, #fartCloud3, #fartMeter, #fartLevel, #fartHead, #fartCollected,
#gameIntro, #instructions, #gameOutro, #mayor, #gameResult, #soundToggle, #closeGame, #deviceOrientation,
#qrCodeScreen, #qrCode, #loadCurtain, #spinner, #safariPrompt
{
    z-index: 5;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}


#uiContainer {
    height: 100%;
    width: 100%;
}

#ARGameIFrame {
    z-index: 5000;
    height: 100%;
    width: 100%;
    pointer-events: auto;
}

#logo {
    z-index: 100;
    width: 36vh;
    height: 30.38vh;
    background-image: url('../images/logo.png');
    background-size: contain;
}

#rotateLogo {
    z-index: 100;
    width: 40vmin;
    height: 33.7vmin;
    background-image: url('../images/logo.png');
    background-size: contain;
}

#frame {
    height: 100%;
    width: 100%;
    aspect-ratio: 1.778;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: none;
    overflow: hidden;
}

#timeDisplay {
    z-index: 100;
    height: 16vh;
    width: 43vh;
    top: 2vh;
    right: 2vh;
    background-image: url('../images/timer_bg.png');
    background-size: contain;
}

#time {
    display: flex;
    width: 100%;
    height: 100%;
    top: 3%;
    justify-content: center;
    align-items: center;
}




#elfSelectScreen {
    width: 100%; /* 177.78vh; */
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#selectBackground {
    width: 100%;
    height: 100%;
    bottom: 1%;
    background-size: 75%;
    background-image: url('../images/select_bg.jpg');
}

#selectedElf {
    width: 33%;
    height: 100%;
    top: 89.5%;
    left: 48.25%;
    transform: translate(-50%, -50%);
    background-image: url('../images/elf_body_wave.png');
    background-size: contain;
    transition: none;
}

#wavingElf {
    width: 33%;
    height: 138%;
    top: 90.25%;
    left: 38%;
    transform: translate(-50%, -50%) scale(0.44);
    background-image: url('../images/elf_body_wave.png');
    background-size: contain;
}

#selectedElfHead {
    width: 43%;
    height: 44%;
    top: 6%;
    left: 52%;
    transform: translate(-50%, -50%);
    background-image: url('../images/elf1_head.png');
    background-size: contain;
}

#chosenElfHead {
    width: 43%;
    height: 44%;
    top: 6%;
    left: 52%;
    transform: translate(-50%, -50%);
    background-image: url('../images/elf1_head.png');
    background-size: contain;
}

#elfName {
    width: 30%;
    height: 28%;
    top: 22%;
    left: 21%;
    background-image: url('../images/elvie.png');
    background-size: contain;
}

#selectScreenBorder {
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);

    background: repeating-linear-gradient(
                                            -45deg,
                                            #ec2127,
                                            #ec2127 40px,
                                            #c42027 40px,
                                            #c42027 48px
                                        );

    mask: url('../images/select_cutout2.png'), center/contain no-repeat, linear-gradient(#000 0 0);
    mask-composite: exclude;

    -webkit-mask-size: cover;
    mask-size: contain; 

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;
}

#greenStitch {
    height: 74%;
    width: 76%;
    top: 48.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/green_select_frame.png');
    background-size: contain;
}

#chooseElf {
    width: 38%;
    height: 32%;
    top: -1.5%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/choose_elf.png');
    background-size: contain;
}

#leftArrow, #rightArrow {
    width: 10%;
    height: 20%;
    top: 50%;
    left: 16%;
    transform: translateY(-50%);
    background-image: url('../images/left_arrow.png');
    background-size: contain;
    pointer-events: auto;
}

#rightArrow {
    left: auto;
    right: 16%;
    background-image: url('../images/right_arrow.png');
}

#readyButton {
    width: 26%;
    height: 16%;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/ready.png');
    background-size: contain;
    pointer-events: auto;
}



#greenBar {
    width: 130%;
    height: 7.5%;
    bottom: -0.5%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/footer_green.png');
    background-size: contain;
    background-repeat: repeat-x;
}

#leftDecorations {
    width: 20%;
    height: 72%;
    bottom: -1%;
    left: -5%;
    background-image: url('../images/decorations_left.png');
    background-size: contain;
}

#rightDecorations {
    width: 13%;
    height: 75.5%;
    bottom: 3%;
    right: -2%;
    background-image: url('../images/decorations_right.png');
    background-size: contain;
}

#topDecorations {
    width: 100%;
    height: 15%;
    top: 0%;
    left: 51%;
    transform: translateX(-50%);
    background-image: url('../images/decorations_top.png');
    background-size: contain;
}




#welcomeScreen {
    height: 100%;
    width: 100%;
    pointer-events: auto;
}

#welcomeBackground {
    width: 100vw;
    height: 100%;
    aspect-ratio: 1.778;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/instruction_bg.jpg');
    background-size: cover;
}

#welcomeSign {
    width: 96vh;
    height: 60vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/welcome1.png');
    background-size: contain;
}




#villageScreen {
    width: 200%;
    height: 100%;
    left: -50%;
    pointer-events: auto;
    transition: none;
}

#villageBackground {
    width: 100%;
    height: 100%;
    background-image: url('../images/village_background.png');
    background-size: cover;
}

#tapHouseSign {
    width: 24%;
    height: 22.5%;
    bottom: 0%;
    left: 49.5%;
    transform: translateX(-50%);
    background-image: url('../images/tap_house.png');
    background-size: contain;
}


#house1, #house2, #house3, #house4, #house5 {
    width: 13%;
    height: 42%;
    top: 46%;
    left: 6%;
    pointer-events: all;
}

#house2 {
    top: 40%;
    left: 23%;
}

#house3 {
    top: 44%;
    left: 41.5%;
    width: 14%;
    height: 31%;
}

#house4 {
    top: 37%;
    left: 60%;
}

#house5 {
    top: 50%;
    left: 81%;
}




#houseName1, #houseName2, #houseName3, #houseName4, #houseName5 {
    width: 14%;
    height: 35%;
    top: 23.5%;
    left: 13.5%;
    transform: translate(-50%, -50%);
    background-image: url('../images/prank_factory_name.png');
    background-size: contain;
}

#houseName2 {
    top: 22.25%;
    left: 32%;
    width: 16.5%;
    height: 36.5%;
    background-image: url('../images/training_name.png');
}

#houseName3 {
    top: 25.5%;
    left: 49.25%;
    width: 15%;
    height: 32%;
    background-image: url('../images/fart_name.png');
}

#houseName4 {
    top: 27%;
    left: 66.5%;
    width: 15%;
    height: 32%;
    background-image: url('../images/elfie_name.png');
}

#houseName5 {
    top: 26%;
    left: 87.5%;
    width: 15.5%;
    height: 35%;
    background-image: url('../images/workshop_name.png');
}




#houseReplay1, #houseReplay2, #houseReplay3, #houseReplay4, #houseReplay5 {
    width: 21.5%;
    height: 81.5%;
    top: 50.5%;
    left: 13.25%;
    transform: translate(-50%, -50%);
    background-image: url('../images/prank_replay.png');
    background-size: contain;
    opacity: 0;
}

#houseReplay2 {
    width: 13.5%;
    height: 72.5%;
    top: 43%;
    left: 29.25%;
    transform: translate(-50%, -50%);
    background-image: url('../images/training_replay.png');
}

#houseReplay3 {
    width: 12%;
    height: 68%;
    top: 42.5%;
    left: 51.6%;
    transform: translate(-50%, -50%);
    background-image: url('../images/fart_replay.png');
}

#houseReplay4 {
    width: 21.5%;
    height: 78%;
    top: 45.8%;
    left: 70.1%;
    transform: translate(-50%, -50%);
    background-image: url('../images/elfie_replay.png');
}

#houseReplay5 {
    width: 14%;
    height: 90%;
    top: 53%;
    left: 82.1%;
    transform: translate(-50%, -50%);
    background-image: url('../images/workshop_replay.png');
}



#prankFactory, #fartAttack, #trainingAcademy {
    width: 100%; /*177.78vh;*/
    height: 100%;
    right: 0;
}

#brickBackground {
    width: 200%;
    height: 200%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-image: url('../images/bricks.jpg');
    background-repeat: repeat;
    background-size: 50%;
}

#standingElf, #standingElfOutro {
    height: 125%;
    width: 36%;
    bottom: -27%;
    left: -9%;
    rotate: 10deg;
    background-image: url('../images/elf1_stand.png');
    background-size: contain;
}

#conveyorBelt {
    height: 26%;
    width: 88%;
    bottom: 0;
    left: -16.5%;
    background-image: url('../images/conveyor.png');
    background-size: contain;
}

#prankItem {
    height: 81%;
    width: 48%;
    bottom: 20%;
    left: 44%;
    transform: translateX(-50%);
    background-image: url('../images/tree0.png');
    background-size: contain;
    transition: none;
}

#prankEffect {
    height: 100%;
    width: 100%;
    /*background-image: url('../images/tree1.png');*/
    background-size: contain;
    transition: none;
}

#prankButtons {
    height: 71%;
    width: 15%;
    bottom: 2%;
    right: 1%;
    background-image: url('../images/prank_buttons.png');
    background-size: contain;
}

#prankButton1, #prankButton2, #prankButton3 {
    width: 72%;
    height: 27%;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: all;
}

#prankButton2 {
    top: 35%;
}

#prankButton3 {
    top: 70%;
}





#pondBackground {
    width: 200%;
    height: 150%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-image: url('../images/training_bg.jpg');
}

#trainingCounter {
    width: 14%;
    height: 11%;
    right: 3vh;
    bottom: 3vh;
    text-align: right;
}


#elf1 {
    width: 14.5%;
    height: 13%;
    top: 54.5%;
    left: 0%;
    background-image: url('../images/t_elf1.png');
    background-size: contain;
    pointer-events: auto;
}

#elf1Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf1_circle.png');
    background-size: contain;
}

#elf2 {
    width: 14.5%;
    height: 34%;
    top: 66%;
    left: 4%;
    background-image: url('../images/t_elf2.png');
    background-size: contain;
    pointer-events: auto;
}

#elf2Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf2_circle.png');
    background-size: contain;
}

#elf3 {
    width: 14%;
    height: 34%;
    top: 28%;
    left: 20.25%;
    background-image: url('../images/t_elf3.png');
    background-size: contain;
    pointer-events: auto;
}

#elf3Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf3_circle.png');
    background-size: contain;
}

#elf4 {
    width: 32.5%;
    height: 20%;
    top: 80%;
    left: 34.75%;
    background-image: url('../images/t_elf4.png');
    background-size: contain;
    pointer-events: auto;
}

#elf4Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf4_circle.png');
    background-size: contain;
}

#elf5 {
    width: 9%;
    height: 14%;
    top: 4.75%;
    left: 36.75%;
    background-image: url('../images/t_elf5.png');
    background-size: contain;
    pointer-events: auto;
}

#elf5Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf5_circle.png');
    background-size: contain;
}

#elf6 {
    width: 15%;
    height: 28.5%;
    top: 30%;
    left: 43%;
    background-image: url('../images/t_elf6.png');
    background-size: contain;
    pointer-events: auto;
}

#elf6Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf6_circle.png');
    background-size: contain;
}

#elf7 {
    width: 11.5%;
    height: 20%;
    top: 25%;
    left: 52.25%;
    background-image: url('../images/t_elf7.png');
    background-size: contain;
    pointer-events: auto;
}

#elf7Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf7_circle.png');
    background-size: contain;
}

#elf8 {
    width: 11.5%;
    height: 31%;
    top: 1.5%;
    left: 63.75%;
    background-image: url('../images/t_elf8.png');
    background-size: contain;
    pointer-events: auto;
}

#elf8Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf8_circle.png');
    background-size: contain;
}

#elf9 {
    width: 29%;
    height: 46%;
    top: 39.5%;
    left: 63.5%;
    background-image: url('../images/t_elf9.png');
    background-size: contain;
    pointer-events: auto;
}

#elf9Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf9_circle.png');
    background-size: contain;
}

#elf10 {
    width: 14%;
    height: 19.5%;
    top: 20.75%;
    left: 80%;
    background-image: url('../images/t_elf10.png');
    background-size: contain;
    pointer-events: auto;
}

#elf10Circle {
    width: 100%;
    height: 100%;
    background-image: url('../images/t_elf10_circle.png');
    background-size: contain;
}








#fartBackground {
    width: 100vw;
    aspect-ratio: 1.422;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-size: contain;
    background-image: url('../images/green_bg.jpg');
    background-position-y: bottom;
}

#redLine {
    /*width: 100%;
    height: 10%;
    bottom: 0;
    background-size: contain;*/
    width: 100vw;
    height: 3%;
    left: 50%;
    bottom: 16.25%;
    transform: translateX(-50%);
    background-image: url('../images/red_line.png');
}

#fartMeter {
    width: 10%;
    height: 77%;
    bottom: 4%;
    right: 7.5%;
    background-image: url('../images/fartmeter.png');
    background-size: contain;
}

#fartLevel {
    width: 100%;
    height: 24%;
    bottom: 64%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/fart_level.png');
    background-size: contain;
}

#fartHead {
    width: 105%;
    height: 105%;
    top: 45%;
    left: 47%;
    transform: translate(-50%, -50%);
    background-image: url('../images/elf1_head.png');
    background-size: contain;
}

#fartCloud1, #fartCloud2, #fartCloud3 {
    width: 14%;
    height: 88%;
    top: 85%;
    left: 23%;
    transform: translateY(-100%);
    background-image: url('../images/fart_cloud.png');
    background-size: contain;
    pointer-events: auto;
    transition: none;
}

#fartCloud2 {
    left: 45%;
}

#fartCloud3 {
    left: 65%;
}

#fartCollected {
    width: 25%;
    height: 50%;
    bottom: 26%;
    left: 23%;
    background-image: url('../images/fart_collect.png');
    background-size: contain;
    transition: none;
}





#gameIntro {
    width: 200%;
    height: 200%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: auto;
}

#instructions {
    height: 55%;
    width: 27%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/welcome.png');
    background-size: contain;
    transition: none;
}




#gameOutro {
    width: 200%;
    height: 100vh;
    left: 0;
    backdrop-filter: blur(3px);
    pointer-events: auto;
}

#mayor {
    height: 100%;
    width: 24%;
    bottom: -19%;
    left: 0%;
    background-image: url('../images/mayor.png');
    background-size: contain;
}

#gameResult {
    height: 50%;
    width: 25%;
    top: 44%;
    left: 25%;
    transform: translate(-50%, -50%);
    background-image: url('../images/prank_success.png');
    background-size: contain;
    transition: none;
}


#soundToggle, #closeGame {
    width: 14vh;
    height: 13vh;
    top: 1vh;
    right: 1vh;
    background-image: url('../images/sound_on.png');
    background-size: contain;
    pointer-events: auto;
}

#closeGame {
    top: 15vh;
    right: 1vh;
    background-image: url('../images/close.png');
}



#qrCodeScreen {
    z-index: 5000;
    width: 60vw;
    height: 33vw;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/qr_frame.png');
    background-size: contain;
    pointer-events: all;
}

#qrCode {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#qrCode > svg {
    position: absolute;
    width: 26%;
    height: 45%;
    top: 33.75%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#qrCode svg rect{
	fill: #ffffff !important;
}



#loadCurtain {
    position: absolute;
    z-index: 5000;
    width: 100%;
    height: 100%;

    background: repeating-linear-gradient(
                                            -45deg,
                                            #ec2127,
                                            #ec2127 40px,
                                            #c42027 40px,
                                            #c42027 48px
                                        );
    pointer-events: all;
}


#spinner {
    position: absolute;
    width: 30vmin;
    height: 30vmin;
    top: 50%;
    left: 50%;
    margin-left: -15vmin;
    margin-top: -15vmin;
    background-image: url('../images/load_icon256.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(0);
}




#safariPrompt {
    z-index: 5000;
    width: 80%;
    height: 80%;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/prompt_safari.png');
    background-size: contain;
    pointer-events: all;
}















































#loadFooter {
    z-index: 20;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;

    width: 100vw;
    height: 5.225vw;
    bottom: 0vw;
    background-image: url('../images/x.png');
    background-size: contain;
}

#loadHeader {
    z-index: 10;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;

    width: 90vw;
    height: 53%;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    background-image: url('../images/x.png');
    background-size: contain;
}









#deviceOrientation {
	/*background-color: #f6f6f6;*/
	z-index: 1000 !important;
    display: none;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
                                            -45deg,
                                            #ec2127,
                                            #ec2127 40px,
                                            #c42027 40px,
                                            #c42027 48px
                                        );
}


#desktopError {
    background-color: #eb1f20;
	z-index: 5000 !important;
    display: none;
    /*background-image: url('../images/background.jpg');*/
    background-size: cover;
}

#desktopErrorText {
    position: relative;
    left: -5vw;
    width: 125%;
    font-family: 'Varela-Round', sans-serif;
    font-size: 18pt;
    color: #ffffff;
}

#desktopHeader {
    z-index: -1;
    position: absolute;
    width: 40vw;
    height: 100%;
    left: -4%;
    bottom: -2%;
    /* transform: translateX(-50%);*/
    background-repeat: no-repeat;
    background-position: center center;
    background: url('../images/background.jpg') center center no-repeat;
    background-size: contain;
}


@media (orientation: portrait ) {
	#deviceOrientation {
		display: block;
    }
}

#promptRotateDevice {
	z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vmin;
    height: 80vmax;
    transform: translate(-50%, -50%);
	background: url('../images/prompt_turn_device.png') center center no-repeat;
	background-size: contain;
}







.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
        -webkit-user-drag: none;   
}

.fadeOut { animation: fadeOut 0.3s linear forwards; }
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}


.fadeIn { animation: fadeIn 0.3s linear forwards; }
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.rotate-center { animation: rotate-center 1.1s cubic-bezier( 0.785, 0.135, 0.150, 0.860 ) infinite both; }
@keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}