.map {
    animation: fadeIn;
    animation-duration: 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.index-menu-item.lore {
    animation: appear1;
    animation-duration: 2s;
}

.index-menu-item.gameplay {
    animation: appear2;
    animation-duration: 2s;
}

.index-menu-item.classes {
    animation: appear3;
    animation-duration: 2s;
}

.index-menu-item.talents {
    animation: appear4;
    animation-duration: 2s;
}

.index-menu-item.geography {
    animation: appear5;
    animation-duration: 2s;
}

.index-menu-item.creatures {
    animation: appear6;
    animation-duration: 2s;
}

.index-menu-item.money {
    animation: appear7;
    animation-duration: 2s;
}

.index-menu-item.equipment {
    animation: appear8;
    animation-duration: 2s;
}

.index-menu-item.downloads {
    animation: appear9;
    animation-duration: 2s;
}

@keyframes appear1 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }
    11% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear2 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    11% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    22% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear3 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    22% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    33% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear4 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    33% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    44% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear5 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    44% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    56% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear6 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    56% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    67% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear7 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    67% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    78% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear8 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    78% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    89% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes appear9 {
    0% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    89% {
        opacity: 0;
        transform: rotateY(360deg)
    }

    100% {
        opacity: 1;

    }
}




.fan-piece[piece='1'] {
    transform: rotateZ(0deg);
}

.fan-piece[piece='2'] {
    transform: rotateZ(21deg);
}

.fan-piece[piece='3'] {
    transform: rotateZ(42deg);
}

.fan-piece[piece='4'] {
    transform: rotateZ(63deg);
}

.fan-piece[piece='5'] {
    transform: rotateZ(84deg);
}

.fan-piece[piece='6'] {
    transform: rotateZ(105deg);
}

.fan-piece[piece='7'] {
    transform: rotateZ(127deg);
}

.fan-piece[piece='8'] {
    transform: rotateZ(148deg);
}

.fan-piece[piece='9'] {
    transform: rotateZ(169deg);
}

.fan-piece[piece='10'] {
    transform: rotateZ(190deg);
}

.fan-piece[piece='11'] {
    transform: rotateZ(211deg);
}

.fan-piece[piece='12'] {
    transform: rotateZ(232deg);
}

.fan-piece[piece='13'] {
    transform: rotateZ(254deg);
}

.fan-piece[piece='14'] {
    transform: rotateZ(275deg);
}

.fan-piece[piece='15'] {
    transform: rotateZ(296deg);
}

.fan-piece[piece='16'] {
    transform: rotateZ(317deg);
}

.fan-piece[piece='17'] {
    transform: rotateZ(338deg);
}

.fan-piece[piece='2'] {
    animation: fanPiece2;
    animation-duration: 3s;
}

.fan-piece[piece='3'] {
    animation: fanPiece3;
    animation-duration: 3s;
}

.fan-piece[piece='4'] {
    animation: fanPiece4;
    animation-duration: 3s;
}

.fan-piece[piece='5'] {
    animation: fanPiece5;
    animation-duration: 3s;
}

.fan-piece[piece='6'] {
    animation: fanPiece6;
    animation-duration: 3s;
}

.fan-piece[piece='7'] {
    animation: fanPiece7;
    animation-duration: 3s;
}

.fan-piece[piece='8'] {
    animation: fanPiece8;
    animation-duration: 3s;
}

.fan-piece[piece='9'] {
    animation: fanPiece9;
    animation-duration: 3s;
}

.fan-piece[piece='10'] {
    animation: fanPiece10;
    animation-duration: 3s;
}

.fan-piece[piece='11'] {
    animation: fanPiece11;
    animation-duration: 3s;
}

.fan-piece[piece='12'] {
    animation: fanPiece12;
    animation-duration: 3s;
}

.fan-piece[piece='13'] {
    animation: fanPiece13;
    animation-duration: 3s;
}

.fan-piece[piece='14'] {
    animation: fanPiece14;
    animation-duration: 3s;
}

.fan-piece[piece='15'] {
    animation: fanPiece15;
    animation-duration: 3s;
}

.fan-piece[piece='16'] {
    animation: fanPiece16;
    animation-duration: 3s;
}

.fan-piece[piece='17'] {
    animation: fanPiece17;
    animation-duration: 3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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