body { 
    margin: 0; 
    padding: 0; 
    font-family: "Roboto", sans-serif; 
    user-select: none; 
    overflow: hidden; 
    width: 100%;
    height: 100vh;
    /* background: radial-gradient(ellipse at center,  rgb(43, 43, 43) 0%, rgb(15, 15, 15) 30%, rgb(10, 10, 10) 40%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%); */
    /* background: radial-gradient(ellipse at center,  rgb(23, 20, 43) 0%, rgb(23, 5, 45) 30%, rgb(23, 10, 35) 40%, rgb(0, 0, 22) 70%, rgb(0, 0, 15) 100%); */
    /* background: radial-gradient(ellipse at center,  rgb(253, 241, 183) 0%, rgb(253, 241, 183) 30%, rgb(253, 241, 183) 40%, rgb(253, 241, 183) 70%, rgb(253, 241, 183) 100%); */
    
}
.overlay{ position: absolute; top: 0; bottom: 0; width: 100%; pointer-events: none; z-index: 1; background-image: url('papyrus.jpg'); background-size: 100% 100%;}

.btn_scale{
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
.btn_scale:active{
    -webkit-transform: scale3d(0.9,0.9,0.9);
    transform: scale3d(0.9,0.9,0.9);
}

.lang{
    width:46px;
    height:46px;
    border-radius: 100px;
    border:3px solid transparent;
    cursor: pointer;
}
.lang.active{
    border:3px solid #fff
}

.mainTitle{
    color: #ada587;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-size: 24px;
    position: absolute;
    top: 160px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.familyTreeContainer{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
}
/* .avatar.pink{
    text-shadow: 0px 0px 18px pink, 0px 0px 18px pink;
}
.avatar.red{
    text-shadow: 0px 0px 18px red, 0px 0px 18px red;
}
.avatar.blue{
    text-shadow: 0px 0px 18px blue, 0px 0px 18px blue;
}
.avatar.green{
    text-shadow: 0px 0px 18px green, 0px 0px 18px green;
}
.avatar.yellow{
    text-shadow: 0px 0px 18px yellow, 0px 0px 18px yellow;
}
.avatar.purple{
    text-shadow: 0px 0px 18px purple, 0px 0px 18px purple;
} */
/* .avatar.pink{
    text-shadow: 0px 0px 18px rgb(255, 255, 255);
}
.avatar.red{
    text-shadow: 0px 0px 18px rgb(255, 255, 255);
}
.avatar.blue{
    text-shadow: 0px 0px 18px rgb(255, 255, 255);
}
.avatar.green{
    text-shadow: 0px 0px 18px rgb(255, 255, 255);
}
.avatar.yellow{
    text-shadow: 0px 0px 18px rgb(255, 255, 255);
}
.avatar.purple{
    text-shadow: 0px 0px 18px rgb(255, 255, 255);
} */
.avatar{
    border-radius: 100px;
    color: #000000;
    font-weight: 600;
    font-size: 14px;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    pointer-events: all;
}
.avatar._invisible{
    filter: blur(10px);
    opacity:0.5;
    pointer-events: none;
}
.avatarPlus{
    border-radius: 100px;
    color: #000;
    font-weight: 300;
}
.plus{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    position: absolute;
}
.plus._invisible{
    filter: blur(10px);
    opacity:0.5
}
.item{
    position: absolute;
    padding:20px;
    -webkit-animation-duration: 16.2s;
    animation-duration: 16.2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: flex;
    align-items: center;
}
.item.zIndexed{
    z-index: 1000;
}
body .familyTreeContainer{
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    /* -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s; */
}
body.paused .familyTreeContainer{
    /* -webkit-transform:scale(0.9);
    transform:scale(0.9); */
    /* -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s; */
}
body.paused .item{
    /* -webkit-animation-play-state: paused;
    animation-play-state: paused; */
    /* -webkit-animation-name: animatePaused;
    animation-name: animatePaused; */
    -webkit-animation-name: none;
    animation-name: none;
    /* -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; */
    -webkit-transition: all 0.25s ease-in-out 0.5s;
    transition: all 0.25s ease-in-out 0.5s;
    -webkit-transform: rotate(-0deg) scale(1) translateY(0px) translateX(0px) !important;
    transform: rotate(0deg) scale(1) translateY(0px) translateX(0px) !important;
}
@-webkit-keyframes animatePaused {
    0% { transform: rotate(-0deg) scale(1) translateY(0px) translateX(0px); }
    100% { transform: rotate(-0deg) scale(1) translateY(0px) translateX(0px); }
}
@keyframes animatePaused {
    0% { transform: rotate(-0deg) scale(1) translateY(0px) translateX(0px); }
    100% { transform: rotate(-0deg) scale(1) translateY(0px) translateX(0px); }
}
/* .item:hover{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
} */
.item_disabled{
    opacity:0.4
}
.pos-0{
    left:100px;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-1{
    left:calc(50% - 240px);
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus1{
    left: calc(50% - 12px);
    top: 256px;
}
.pos-1-1{
    left: calc(50% - -1px);
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-2{
    left:calc(50% + 400px);
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-3{
    left: calc(50% - 546px);
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.plus2{
    left: calc(50% - 422px);
    top: 327px;
}
.pos-3-1{
    left: calc(50% - 416px);
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-4{
    left: 1.9%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.plus3{
    left: 12%;
    top: 327px;
}
.pos-4-1{
    left: 12.2%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-5{
    left: 29%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.plus4{
    left: 34.7%;
    top: 420px;
}
.pos-5-1{
    left: 35%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-6{
    left: 8%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus5{
    left: 13.9%;
    top: 429px;
}
.pos-6-1{
    left: 14%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-7{
    left: 14.9%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus6{
    left: 25.4%;
    top: 506px;
}
.pos-7-1{
    left: 25.9%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-8{
    left: calc(50% + 60px);
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus7{
    left: calc(50% + 244px);
    top: 330px;
}
.pos-8-1{
    left: calc(50% + 250px);
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus8{
    left: 73.6%;
    top: 328px;
}
.pos-8-2{
    left: calc(50% + 460px);
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-9{
    left: calc(50% + 16px);
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus9{
    left: 64%;
    top: 408px;
}
.pos-9-1{
    left: calc(50% + 280px);
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-10{
    right: 1%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-11{
    right: 3%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-12{
    right: 6%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-13{
    right: 26.2%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus10{
    right: 36.9%;
    top: 481px;
}
.pos-13-1{
    right: 37.1%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-14{
    left: 4.6%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus11{
    left: 15.8%;
    top: 574px;
}
.pos-14-1{
    left: 16.2%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-15{
    left: 27.7%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.plus12{
    left: 37.5%;
    top: 584px;
}
.pos-15-1{
    left: 38%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-16{
    left: 59.3%;
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus13{
    left: 62.5%;
    top: 568px;
}
.pos-16-1{
    left: 62.8%;
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-17{
    left: 5%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-18{
    left: 15%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-19{
    left: 47.2%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus14{
    left: 57.5%;
    top: 668px;
}
.pos-19-1{
    left: 57.8%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-20{
    left: 65.5%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus15{
    left: 75.62%;
    top: 628px;
}
.pos-20-1{
    left: 76%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-21{
    left: 1.4%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-22{
    left: 18.4%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus16{
    left: 28.7%;
    top: 741px;
}
.pos-22-1{
    left: 29%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-23{
    left: 38.5%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-23-1{
    left: 47.3%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-23-2{
    left: 47.3%;
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.pos-24{
    left: 58.1%;
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus17{
    left: 63.8%;
    top: 757px;
}
.pos-24-1{
    left: 64.2%;
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-25{
    right: 12%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-25-1{
    right: 2.9%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-25-2{
    right: 3.2%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-26{
    left: 18.1%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus18{
    left: 26.4%;
    top: 847px;
}
.pos-26-1{
    left: 26.7%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-27{
    left: 40.4%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-28{
    left: 38%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.plus19{
    left: 45.8%;
    top: 884px;
}
.pos-28-1{
    left: 46.2%;
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-29{
    right: 32.7%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.plus20{
    left: 66.5%;
    top: 870px;
}
.pos-29-1{
    right: 21.9%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.pos-30{
    right: 14%;
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.pos-31{
    right: 7%;
    -webkit-animation-name: animate0;
    animation-name: animate0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}



.arrow{
    opacity: 0.5;
    position: absolute;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    z-index: 1;
}
.arrow._invisible{
    filter: blur(10px);
    opacity:0.2
}
.arrow1{
    left:calc(50% - 350px);
}
.arrow2{
    left: calc(50% - 412px);
}
.arrow3{
    left: 12.5%;
}
.arrow4{
    left: 14.5%;
}
.arrow5{
    left: 28.7%;
}
.arrow6{
    left: 63.3%;
}
.arrow7{
    left: 58.3%;
}
.arrow8{
    left: 25.8%;
}
.arrow9{
    left: 25.85%;
}
.arrow10{
    left: 21.6%;
}
.arrow11{
    left: 62.6%;
}
.arrow12{
    left: 16.3%;
}
.arrow13{
    left: 12.18%;
}
.arrow14{
    left: 62.8%;
}
.arrow15{
    left: 60.75%;
}
.arrow16{
    left: 4.85%;
}
.arrow17{
    left: 24.85%;
}
.arrow18{
    left: 46.85%;
}
.arrow19{
    left: 57.92%;
}
.arrow20{
    left: 57.92%;
}
.arrow21{
    left: 23.25%;
}
.arrow22{
    left: 44.70%;
}
.arrow23{
    left: 64.20%;
}
.arrow24{
    left: 64.20%;
}
.arrow25{
    left: 64.20%;
}
.arrow26{
    left: 51.7%;
}

@-webkit-keyframes animate0 {
    0% { transform: rotate(-1deg) scale(1) translateY(2px) translateX(2px); }
    25% { transform: rotate(1deg) scale(1.05) translateY(5px) translateX(-3px); }
    50% { transform: rotate(-1deg) scale(1) translateY(10px) translateX(2px); }
    75% { transform: rotate(1deg) scale(1.05) translateY(1px) translateX(1px); }
    100% { transform: rotate(-1deg) scale(1) translateY(2px) translateX(2px); }
}
@keyframes animate0 {
    0% { transform: rotate(-1deg) scale(1) translateY(2px) translateX(2px); }
    25% { transform: rotate(1deg) scale(1.05) translateY(5px) translateX(-3px); }
    50% { transform: rotate(-1deg) scale(1) translateY(10px) translateX(2px); }
    75% { transform: rotate(1deg) scale(1.05) translateY(1px) translateX(1px); }
    100% { transform: rotate(-1deg) scale(1) translateY(2px) translateX(2px); }
}

@-webkit-keyframes animate1 {
    0% { transform: rotate(1deg) scale(1) translateY(1px) translateX(3px); }
    25% { transform: rotate(-1deg) scale(1.05) translateY(4px) translateX(-6px); }
    50% { transform: rotate(1deg) scale(1) translateY(8px) translateX(3px); }
    75% { transform: rotate(-1deg) scale(1.05) translateY(0px) translateX(2px); }
    100% { transform: rotate(1deg) scale(1) translateY(1px) translateX(3px); }
}
@keyframes animate1 {
    0% { transform: rotate(1deg) scale(1) translateY(1px) translateX(3px); }
    25% { transform: rotate(-1deg) scale(1.05) translateY(4px) translateX(-6px); }
    50% { transform: rotate(1deg) scale(1) translateY(8px) translateX(3px); }
    75% { transform: rotate(-1deg) scale(1.05) translateY(0px) translateX(2px); }
    100% { transform: rotate(1deg) scale(1) translateY(1px) translateX(3px); }
}

@-webkit-keyframes animate2 {
    0% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
    25% { transform: rotate(1deg) scale(1) translateY(10px) translateX(3px); }
    50% { transform: rotate(-2deg) scale(1.05) translateY(4px) translateX(0px); }
    75% { transform: rotate(1deg) scale(1) translateY(1px) translateX(2px); }
    100% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
}
@keyframes animate2 {
    0% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
    25% { transform: rotate(1deg) scale(1) translateY(10px) translateX(3px); }
    50% { transform: rotate(-2deg) scale(1.05) translateY(4px) translateX(0px); }
    75% { transform: rotate(1deg) scale(1) translateY(1px) translateX(2px); }
    100% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
}

@-webkit-keyframes animate3 {
    0% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
    25% { transform: rotate(1deg) scale(1) translateY(10px) translateX(3px); }
    50% { transform: rotate(-2deg) scale(1.05) translateY(4px) translateX(0px); }
    75% { transform: rotate(1deg) scale(1) translateY(1px) translateX(2px); }
    100% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
}
@keyframes animate3 {
    0% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
    25% { transform: rotate(1deg) scale(1) translateY(10px) translateX(3px); }
    50% { transform: rotate(-2deg) scale(1.05) translateY(4px) translateX(0px); }
    75% { transform: rotate(1deg) scale(1) translateY(1px) translateX(2px); }
    100% { transform: rotate(-1deg) scale(1.05) translateY(2px) translateX(-1px); }
}

.avatarBtn{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding:4px;
    padding-right: 15px;
    border-radius:200px;
    color:#000;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    background-color: rgba(255,255,255,0);
}
.avatarBtn.active{
    color:#000;
    background-color: rgba(255,255,255,1);
}
.avatarBtn img{
    object-fit: cover;
    object-position: center;
    border-radius: 60px;
    border:2px solid #fff;
}


.makeCenter{
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: -1em;
    margin-bottom: -1em;
}

#villehardouin_1,
#autokratores_1, #autokratores_2, #autokratores_3, #autokratores_4, #autokratores_5,
#despotes_1, #despotes_2, #despotes_3, #despotes_4, #despotes_5, #despotes_6, #despotes_7,
#despoines_1, #despoines_2, #despoines_3, #despoines_4, #despoines_5, #despoines_6, #despoines_7,
#prigkipes_1, #prigkipes_2, #prigkipes_3, #prigkipes_4, #prigkipes_5, #prigkipes_6,
#kefales_1, #kefales_2, #kefales_3, #kefales_4, #kefales_5, #kefales_6, #kefales_7{
    -webkit-transition: all 0.5s cubic-bezier(.17,.67,.45,1.08);
    transition: all 0.5s cubic-bezier(.17,.67,.45,1.08);
}
#villehardouin_1.makeCenter,
#autokratores_1.makeCenter, #autokratores_2.makeCenter, #autokratores_3.makeCenter, #autokratores_4.makeCenter, #autokratores_5.makeCenter,
#despotes_1.makeCenter, #despotes_2.makeCenter, #despotes_3.makeCenter, #despotes_4.makeCenter, #despotes_5.makeCenter, #despotes_6.makeCenter, #despotes_7.makeCenter,
#despoines_1.makeCenter, #despoines_2.makeCenter, #despoines_3.makeCenter, #despoines_4.makeCenter, #despoines_5.makeCenter, #despoines_6.makeCenter, #despoines_7.makeCenter,
#prigkipes_1.makeCenter, #prigkipes_2.makeCenter, #prigkipes_3.makeCenter, #prigkipes_4.makeCenter, #prigkipes_5.makeCenter, #prigkipes_6.makeCenter,
#kefales_1.makeCenter, #kefales_2.makeCenter, #kefales_3.makeCenter, #kefales_4.makeCenter, #kefales_5.makeCenter, #kefales_6.makeCenter, #kefales_7.makeCenter{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 1000;
}
/* 
#villehardouin_1,
#autokratores_1, #autokratores_2, #autokratores_3, #autokratores_4, #autokratores_5,
#despotes_1, #despotes_2, #despotes_3, #despotes_4, #despotes_5, #despotes_6, #despotes_7,
#despoines_1, #despoines_2, #despoines_3, #despoines_4, #despoines_5, #despoines_6, #despoines_7,
#prigkipes_1, #prigkipes_2, #prigkipes_3, #prigkipes_4, #prigkipes_5, #prigkipes_6,
#kefales_1, #kefales_2, #kefales_3, #kefales_4, #kefales_5, #kefales_6, #kefales_7{
    -webkit-transition: all 0.5s cubic-bezier(.17,.67,.45,1.08);
    transition: all 0.5s cubic-bezier(.17,.67,.45,1.08);
}

#villehardouin_1.makeCenter{
    -webkit-transform: scale(1.4) translateY(250px) translateX(550px);
    transform: scale(1.4) translateY(250px) translateX(550px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 1000;
    position: relative;
}

#autokratores_1.makeCenter{
    -webkit-transform: scale(1.4) translateY(110px) translateX(-60px);
    transform: scale(1.4) translateY(110px) translateX(-60px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 1000;
    position: relative;
}
#autokratores_2.makeCenter{
    -webkit-transform: scale(1.4) translateY(108px) translateX(-255px);
    transform: scale(1.4) translateY(108px) translateX(-255px);
    -webkit-transition-delay: 0.0625s;
    transition-delay: 0.0625s;
    z-index: 1000;
    position: relative;
}
#autokratores_3.makeCenter{
    -webkit-transform: scale(1.4) translateY(38px) translateX(403px);
    transform: scale(1.4) translateY(38px) translateX(403px);
    -webkit-transition-delay: 0.125s;
    transition-delay: 0.125s;
    z-index: 1000;
    position: relative;
}
#autokratores_4.makeCenter{
    -webkit-transform: scale(1.4) translateY(-20px) translateX(-181px);
    transform: scale(1.4) translateY(-20px) translateX(-181px);
    -webkit-transition-delay: 0.1875s;
    transition-delay: 0.1875s;
    z-index: 1000;
    position: relative;
}
#autokratores_5.makeCenter{
    -webkit-transform: scale(1.4) translateY(-14px) translateX(614px);
    transform: scale(1.4) translateY(-14px) translateX(614px);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
    z-index: 1000;
    position: relative;
}


#despotes_1.makeCenter{
    -webkit-transform: scale(1.4) translateY(-172px) translateX(392px);
    transform: scale(1.4) translateY(-172px) translateX(392px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 1000;
    position: relative;
}
#despotes_2.makeCenter{
    -webkit-transform: scale(1.4) translateY(-127px) translateX(236px);
    transform: scale(1.4) translateY(-127px) translateX(236px);
    -webkit-transition-delay: 0.0625s;
    transition-delay: 0.0625s;
    z-index: 1000;
    position: relative;
}
#despotes_3.makeCenter{
    -webkit-transform: scale(1.4) translateY(-108px) translateX(-287px);
    transform: scale(1.4) translateY(-108px) translateX(-287px);
    -webkit-transition-delay: 0.125s;
    transition-delay: 0.125s;
    z-index: 1000;
    position: relative;
}
#despotes_4.makeCenter{
    -webkit-transform: scale(1.4) translateY(-134px) translateX(360px);
    transform: scale(1.4) translateY(-134px) translateX(360px);
    -webkit-transition-delay: 0.1875s;
    transition-delay: 0.1875s;
    z-index: 1000;
    position: relative;
}
#despotes_5.makeCenter{
    -webkit-transform: scale(1.4) translateY(-82px) translateX(85px);
    transform: scale(1.4) translateY(-82px) translateX(85px);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
    z-index: 1000;
    position: relative;
}
#despotes_6.makeCenter{
    width: 134px !important;
    -webkit-transform: scale(1.4) translateY(-32px) translateX(-178px);
    transform: scale(1.4) translateY(-32px) translateX(-178px);
    -webkit-transition-delay: 0.3125s;
    transition-delay: 0.3125s;
    z-index: 1000;
    position: relative;
}
#despotes_7.makeCenter{
    width: 200px !important;
    -webkit-transform: scale(1.4) translateY(21px) translateX(-438px);
    transform: scale(1.4) translateY(21px) translateX(-438px);
    -webkit-transition-delay: 0.375s;
    transition-delay: 0.375s;
    z-index: 1000;
    position: relative;
}


#despoines_1.makeCenter{
    -webkit-transform: scale(1.4) translateY(-180px) translateX(89px);
    transform: scale(1.4) translateY(-180px) translateX(89px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 1000;
    position: relative;
}
#despoines_2.makeCenter{
    -webkit-transform: scale(1.4) translateY(-161px) translateX(-411px);
    transform: scale(1.4) translateY(-161px) translateX(-411px);
    -webkit-transition-delay: 0.0625s;
    transition-delay: 0.0625s;
    z-index: 1000;
    position: relative;
}
#despoines_3.makeCenter{
    -webkit-transform: scale(1.4) translateY(-189px) translateX(239px);
    transform: scale(1.4) translateY(-189px) translateX(239px);
    -webkit-transition-delay: 0.125s;
    transition-delay: 0.125s;
    z-index: 1000;
    position: relative;
}
#despoines_4.makeCenter{
    -webkit-transform: scale(1.4) translateY(-152px) translateX(-27px);
    transform: scale(1.4) translateY(-152px) translateX(-27px);
    -webkit-transition-delay: 0.1875s;
    transition-delay: 0.1875s;
    z-index: 1000;
    position: relative;
}
#despoines_5.makeCenter{
    -webkit-transform: scale(1.4) translateY(-92px) translateX(-251px);
    transform: scale(1.4) translateY(-92px) translateX(-251px);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
    z-index: 1000;
    position: relative;
}
#despoines_6.makeCenter{
    -webkit-transform: scale(1.4) translateY(-32px) translateX(-568px);
    transform: scale(1.4) translateY(-32px) translateX(-568px);
    -webkit-transition-delay: 0.3125s;
    transition-delay: 0.3125s;
    z-index: 1000;
    position: relative;
}
#despoines_7.makeCenter{
    -webkit-transform: scale(1.4) translateY(7px) translateX(-550px);
    transform: scale(1.4) translateY(7px) translateX(-550px);
    -webkit-transition-delay: 0.375s;
    transition-delay: 0.375s;
    z-index: 1000;
    position: relative;
}


#prigkipes_1.makeCenter{
    -webkit-transform: scale(1.4) translateY(-190px) translateX(551px);
    transform: scale(1.4) translateY(-190px) translateX(551px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 1000;
    position: relative;
}
#prigkipes_2.makeCenter{
    -webkit-transform: scale(1.4) translateY(-137px) translateX(405px);
    transform: scale(1.4) translateY(-137px) translateX(405px);
    -webkit-transition-delay: 0.0625s;
    transition-delay: 0.0625s;
    z-index: 1000;
    position: relative;
}
#prigkipes_3.makeCenter{
    -webkit-transform: scale(1.4) translateY(-228px) translateX(376px);
    transform: scale(1.4) translateY(-228px) translateX(376px);
    -webkit-transition-delay: 0.125s;
    transition-delay: 0.125s;
    z-index: 1000;
    position: relative;
}
#prigkipes_4.makeCenter{
    -webkit-transform: scale(1.4) translateY(-160px) translateX(70px);
    transform: scale(1.4) translateY(-160px) translateX(70px);
    -webkit-transition-delay: 0.1875s;
    transition-delay: 0.1875s;
    z-index: 1000;
    position: relative;
}
#prigkipes_5.makeCenter{
    -webkit-transform: scale(1.4) translateY(-147px) translateX(-8px);
    transform: scale(1.4) translateY(-147px) translateX(-8px);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
    z-index: 1000;
    position: relative;
}
#prigkipes_6.makeCenter{
    width: 174px;
    -webkit-transform: scale(1.4) translateY(-84px) translateX(-305px);
    transform: scale(1.4) translateY(-84px) translateX(-305px);
    -webkit-transition-delay: 0.3125s;
    transition-delay: 0.3125s;
    z-index: 1000;
    position: relative;
}


#kefales_1.makeCenter{
    -webkit-transform: scale(1.4) translateY(62px) translateX(-406px);
    transform: scale(1.4) translateY(62px) translateX(-406px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 1000;
    position: relative;
}
#kefales_2.makeCenter{
    -webkit-transform: scale(1.4)  translateY(50px) translateX(584px);
    transform: scale(1.4)  translateY(50px) translateX(584px);
    -webkit-transition-delay: 0.0625s;
    transition-delay: 0.0625s;
    z-index: 1000;
    position: relative;
}
#kefales_3.makeCenter{
    -webkit-transform: scale(1.4) translateY(40px) translateX(120px);
    transform: scale(1.4) translateY(40px) translateX(120px);
    -webkit-transition-delay: 0.125s;
    transition-delay: 0.125s;
    z-index: 1000;
    position: relative;
}
#kefales_4.makeCenter{
    -webkit-transform: scale(1.4) translateY(95px) translateX(417px);
    transform: scale(1.4) translateY(95px) translateX(417px);
    -webkit-transition-delay: 0.1875s;
    transition-delay: 0.1875s;
    z-index: 1000;
    position: relative;
}
#kefales_5.makeCenter{
    -webkit-transform: scale(1.4) translateY(253px) translateX(-562px);
    transform: scale(1.4) translateY(253px) translateX(-562px);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
    z-index: 1000;
    position: relative;
}
#kefales_6.makeCenter{
    text-align: center;
    -webkit-transform: scale(1.4) translateY(227px) translateX(-536px);
    transform: scale(1.4) translateY(227px) translateX(-536px);
    -webkit-transition-delay: 0.3125s;
    transition-delay: 0.3125s;
    z-index: 1000;
    position: relative;
}
#kefales_7.makeCenter{
    -webkit-transform: scale(1.4) translateY(255px) translateX(-482px);
    transform: scale(1.4) translateY(255px) translateX(-482px);
    -webkit-transition-delay: 0.375s;
    transition-delay: 0.375s;
    z-index: 1000;
    position: relative;
} */