::selection {
    background: #f1602c;
    color: white;
}
/* earn-fts */

#earn-tokemons .elementor-column .elementor-widget-text-editor > div {
    border-top: 1px solid white;
    padding-top: 30px;
    width: max-content;
}
#earn-tokemons .elementor-column .elementor-widget-text-editor > div::before {
    content: '01';
    font-family: RobotoMono-Regular, Roboto Mono;
    color: #84faff;
    display: flex;
    border: 1px solid white;
    border-radius: 50%;
    width: 65px;
    justify-content: center;
    height: 65px;
    align-items: center;
    position: absolute;
    font-size: 36px;
    left: 8px;
    top: -32px;
}  
#earn-tokemons .elementor-column .elementor-widget-text-editor:last-child > div::before { 
    content: '02';
}
#earn-tokemons .elementor-column:first-child .elementor-widget-text-editor:last-child > div::after { 
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    left: 57px;
    top: -28px;
    background: #1d1d1d;
}
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor > div::before { 
    content: '03';
}
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:first-child > div::after, 
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:first-child::after { 
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    left: 60px;
    top: 19px;
    background: #1d1d1d;
}
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:first-child::after { 
    width: 6px;
    height: 6px;
    position: absolute;
    left: 18px;
    top: -28px;
}
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:last-child > div::before { 
    content: '04';
}

#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:last-child > div::after, 
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:last-child::before,
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:last-child::after { 
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    left: 58px;
    top: 19px;
    background: #1d1d1d;
}
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:last-child::after { 
    width: 8px;
    height: 8px;
    position: absolute;
    left: 18px;
    top: -30px;
}
#earn-tokemons .elementor-column:last-child .elementor-widget-text-editor:last-child::before { 
    width: 6px;
    height: 6px;
    position: absolute;
    left: 11px;
    top: 16px;
    z-index: 1;
}

/* tokenomics */
#tokenomics {
    position: relative;
    /* margin-top: 300px; */
    
    /* padding-top:90px; */

}
/* #tokenomics::before {
    background: url(../images/tokenomics-moon.png) no-repeat center center / contain;
    width: 38%;
    position: absolute;
    top: 0;
    right: calc((100vw - 80%) / 2);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    display: block;
    content: '';
    aspect-ratio: 1;
} */
@media (min-width: 769px) {
    #tokenomics > .elementor-container::after {
        content: 'ONE GIANT METAVERSE FOR MANKIND';
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        transform-origin: 100% 0;
        display: block;
        position: absolute;
        top: 70%;
        right: calc(var(--el-grido) / 6);
        color: #1d1d1d;
        opacity: .13;
        font-size: 36px;
    }
}
#tokenomics > .elementor-container {
    max-width: 1416px;
    width: 100%;
    margin: auto;
    background-image: 
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),                
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif');/*,
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/rotocol3a.svg'),
                url('../images/rotocol3a.svg')*/
                
    background-repeat: repeat-y,repeat-y,repeat-y,repeat-y,repeat-y,repeat-y,repeat-y,
                no-repeat, no-repeat, no-repeat;/*, no-repeat, no-repeat, no-repeat, no-repeat*/
    background-position: 
                calc(var(--el-grido) / 6 * 0) 0, 
                calc(var(--el-grido) / 6 * 1) 0, 
                calc(var(--el-grido) / 6 * 2) 0,
                calc(var(--el-grido) / 6 * 3) 0,
                calc(var(--el-grido) / 6 * 4) 0,
                calc(var(--el-grido) / 6 * 5) 0,
                100% 0  ,
                
                calc(var(--el-grido) / 6 * 5) 85%, 
                calc(var(--el-grido) / 6 * 4) 90%;/*,
                calc(var(--el-grido) / 6 * 3) 1200px,
                0 540px,
                calc(var(--el-grido) / 6 * 2) 660px,
                calc(var(--el-grido) / 6 * 3) 1020px,
                calc(var(--el-grido) / 6 * 2) 1240px,
                calc(var(--el-grido) / 6 * 2 - 13px) 647px,
                calc(var(--el-grido) / 6 * 2 - 10px) 1230px*/
                
    background-size: 
                auto,auto,auto,auto,auto,auto,auto,
               calc(var(--el-grido) / 6) 1px,
               calc(var(--el-grido) / 6) 1px; /*,
                calc(var(--el-grido) / 6 * 3) 1px,
                calc(var(--el-grido) / 6 * 3) 1px,
                calc(var(--el-grido) / 6 * 3) 1px,
                calc(var(--el-grido) / 6 * 3) 1px,
                auto, 20px 20px*/
}

#tokenomics::before, 
#tokenomics::after {
    /*display: block;
    position: absolute;
    width: 100%;
    content: '';
    top: 0;
    background: url(../images/tokenomics-top.svg) no-repeat center bottom / calc(100% + 17px) auto;
    height: 250px;*/

    content: '';
    display: block;
    width: calc(var(--el-grido) + 1px);
    background-size: calc(var(--el-grido) / 6 + 0px) 40px;
    background-image: linear-gradient(to right, #cecece 1px, transparent 1px), linear-gradient(to bottom, #cecece 1px, transparent 1px);
    background-position: left bottom;
    -webkig-transform: skew(30deg);
    transform: skew(30deg);
    height: 250px;
    margin: auto;
    transform-origin: 0 100%;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
}

#tokenomics::after {

    background-position: left top;
    -webkit-transform: skew(-30deg);
    transform: skew(-30deg);
    height: 200px;
    transform-origin: 0 0;
    bottom: 0;
    top: auto;
}


/*#tokenomics > div {
    overflow-x: hidden;
    overflow-y: clip;
}*/
#tokenomics .elementor-element-populated {
    padding: 0!important;
}

#tokenomics-title {
    position: relative;
    background: white;
    padding: 50px 0 60px;
    border: 1px solid #cecece;

}
/* #tokenomics-title::after {
    content: url('../images/tokenomics.svg');
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
} */
#tokenomics-title h2 {
    text-shadow: 0px 0px 2px #1d1d1d, 
                 0px 0px 2px 2px #1d1d1d;

}
#tokenomics section {
    padding-left: 0;
    padding-bottom: 120px;
}
#tokenomics .tokenomics-cards {
    width: calc(var(--el-grido) / 6 * 2);
    border: 1px solid #CECECE;
    margin-top: 50px;
    background: white;
}
#tokenomics .tokenomics-cards:nth-child(even){
    left:  calc(var(--el-grido) / 6  );
}
#tokenomics .tokenomics-cards:last-child {
    width: calc(var(--el-grido) / 6 * 3);
    margin-left: 0;
}
.card-title {
    background: #F3F3F3;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #CECECE;
}
#tokenomics .tokenomics-cards:last-child .card-title {
    background: #84FAFF;
}
.card-title h4 {
    color: #1D1D1D;
    font-size: 14px;
    padding: 5px 0 5px 40px;
    font-weight: bold;
}
.card-title h4 i {
    font-weight: normal;
    display: block;
    font-style: normal;
}
.card-title strong {
    background: white;
    border-left: 1px solid #CECECE;
    padding: 5px 18px;
    font-family: Roboto Mono;
    color: #1D1D1D;
    line-height: 16px;
    font-size: 16px;
    display: flex;
    align-items: center;
}
#tokenomics .tokenomics-cards small {
    font-size: 40px;
    color: #1d1d1d;
    padding: 16px 0 16px 36px;
    font-family: Roboto Mono;
    font-weight: 500;
}
#tokenomics .tokenomics-cards:last-child small {
    color: #F8A716
}
/* #tokenomics-inner,
#tokenomics-inner > div,
#tokenomics-inner > div > div:last-child, 
#tokenomics-inner > div > div:last-child > div {
    position: static;
}*/
#le-moon {
    position: absolute;
    top: -270px;
    right: calc((100vw - 80%) / 2);
    transition: right .3s ease-in;
    z-index: 1;
} 
#pointerless-line-1 {
    width: 10px;
    transition: width .5s ease-out;
    height: 1px;
    background: #CECECE;
    position: absolute;
    top: 500px;
    left: 50%;
    font-size: 10px;
    text-align: right;
    color: black;
}
#pointerless-line-1.lat {
    width: calc(var(--el-grido) / 6 * 1.5);
}
#pointerless-line-1::before {
    content:'';
    border: 1px solid #CECECE;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
#pointerless-line-1 span {
    position: relative;
    top: -20px;
}
#pointerless-line-2 {
    width: 77px;
    height: 77px;
    border-radius: 50%;
    border: 1px solid #cecece;
    position: absolute;
    left: calc(var(--el-grido) / 6 * 4);
    background: white;
    top: 700px;
    transform: translate(-50%, 0)
}
#pointerless-line-2::before {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid #cecece;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
#pointerless-line-2::after {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #cecece;
    background: white;
    position: absolute;
    /* top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -6px);
    transform: translate(-50%, -6px); */
    top: calc(50% - 12.5px);
    left: calc(50% - 12.5px);
    animation: reverseOrbit 2.5s linear infinite;
}
@keyframes reverseOrbit {
    0%   { transform: rotate(360deg) translateX(-45px) rotate(360deg); }
    100% { transform: rotate(0deg) translateX(-45px) rotate(0deg); }
}
#pointerless-line-2 span {
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid #cecece;
    background: white;
    position: absolute;
    top: 23px;
    left: 23px;
    animation: myOrbit 4s linear infinite;
    z-index: 1;
}
@keyframes myOrbit {
    0% { transform: rotate(0deg) translateX(80px) rotate(0deg) scale(.8); }
    50% { transform: rotate(180deg) translateX(60px) rotate(-180deg) scale(1.6); }
    100%   { transform: rotate(360deg) translateX(80px) rotate(-360deg) scale(.8); }
}

#pointerless-line-3 {
    width: 10px;
    transition: width .6s ease-out;
    height: 1px;
    background: #CECECE;
    position: absolute;
    top: 1050px;
    left: 50%;
    font-size: 10px;
    text-align: right;
    color: black;
}
#pointerless-line-3.lat {
    width: calc(var(--el-grido) / 6 * 2);
}
#pointerless-line-3::before {
    content:'';
    border: 1px solid #CECECE;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
#pointerless-line-3 span {
    position: relative;
    top: -20px;
}
#pointerless-line-4 {
    width: 10px;
    transition: width .6s .3s ease-out;
    height: 1px;
    background: #CECECE;
    position: absolute;
    top: 1200px;
    left: 50%;
    font-size: 10px;
    text-align: right;
    color: black;
}
#pointerless-line-4.lat {
    width: calc(var(--el-grido) / 6 * 3);
}
#pointerless-line-4::before {
    content:'';
    border: 1px solid #CECECE;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
#pointerless-line-4 span {
    position: relative;
    top: -20px;
}

#pointerless-line-5 {
    width: calc(var(--el-grido) / 6 * 0.5);
    height: 1px;
    background: #CECECE;
    position: absolute;
    top: 1290px;
    left: calc(var(--el-grido) / 6 * 5);
    font-size: 10px;
    text-align: right;
    color: black;
}
#pointerless-line-5::before {
    content:'';
    border: 1px solid #CECECE;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 50%;
    left: 100%;
    position: absolute;
    transform: translate(0%, -50%);
    display: block;
}

/* Phases */
#carousel-moon-carousel > .elementor-container  > .elementor-column > .elementor-widget-wrap,
#roadmap > .elementor-container  > .elementor-column > .elementor-widget-wrap {
    padding: 0
}
/* #carousel-moon-carousel .elementor-element-populated > div  {
    padding-right: 80px;
    max-width: 670px;
    margin-top: 70px;
} */
#carousel-moon-carousel > div > div >.elementor-element-populated > div .elementor-widget-wrap {
    padding: 58px 43px 43px 62px
}
#carousel-moon-carousel > div > div >.elementor-element-populated > div .elementor-widget-image {
    position: absolute;
    right: -15%;
    top: 0%;
    width: 100%;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
#carousel-moon-carousel > div > div >.elementor-element-populated > div  h3 {
    position: relative;
    z-index: 1;
    padding-bottom: 132px;
}
/* #carousel-moon-carousel > div > .elementor-column {

} */
/* Hide scrollbar for Chrome, Safari and Opera */
#carousel-moon-carousel > div > div::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  #carousel-moon-carousel > div > div {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow-x: scroll;
  }
#carousel-moon-carousel > div > div > .elementor-element-populated {
    width: calc(640px * 4);
    max-width: none;
    flex-wrap: nowrap;
}
#carousel-moon-carousel > div > div > .elementor-element-populated > div {
    width: 640px;
    margin: 70px 43px 0 ;
    border: 1px solid #1d1d1d;
    pointer-events: none;
}



.premium-carousel-wrapper .slick-track, 
.premium-carousel-wrapper .slick-track > .slick-slide, 
.premium-carousel-wrapper .slick-track > .slick-slide > div,
.premium-carousel-wrapper .slick-track > .slick-slide > div > section, 
.premium-carousel-wrapper .slick-track > .slick-slide > div > section > div,
.premium-carousel-wrapper .slick-track > .slick-slide > div > section > div > div {
    display: flex;
    height: auto;
}
.premium-carousel-wrapper .slick-slider {
    z-index: 2
}

#feiz1 .elementor-widget-heading::before,
#feiz2 .elementor-widget-heading::before,
#feiz3 .elementor-widget-heading::before,
#feiz4 .elementor-widget-heading::before {
    content: attr(data-status);
    display: block;
    position: absolute;
    right: 0;
    background: #e6e6e6;
    padding: 3px 4px;
    font-size: 9px;
}
#feiz1 .elementor-widget-heading::before {
    background: #70d34d;
}
#feiz2 .elementor-widget-text-editor::before {
    background: #efefef;
}

/* moonies */
#moonies .elementor-widget-wrap {
    border: 1px solid #F1602C;
    position: relative;
    padding: 15px;
    background: #1d1d1d
}
#moonies .elementor-widget-icon {
    position: absolute;
    width: 34px;
    height: 34px;
    right: 15px
}
#moonies .elementor-widget-icon + .elementor-widget-icon {
    top: 60px;
}
#moonies .elementor-widget-icon  .elementor-icon-wrapper {
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: center;
}
#moonies .elementor-widget-icon .elementor-widget-container {
    border-radius: 50%;
}
#moonies .elementor-widget-image {
    width: 73%;
    position: relative;
    top: -50px;
    left: -30px;
}
#moonies .elementor-widget-wrap h2 {
    margin-top: -20px;
}
#moonies .elementor-widget-wrap h2,
#moonies .elementor-widget-text-editor div,
#moonies .elementor-widget-text-editor p {
    line-height: 22px;
}
#big-contact {
    position: relative;
    z-index: 2;
}
#big-contact a {
    text-decoration: underline;
    text-decoration-color: #F1602C;
}

/* footery */
#contact {
    /* overflow: hidden; */
}
@media (min-width:769px){
#contact > #da-mun {
    background-image: url(https://fotm.magicode.studio/wp-content/uploads/2022/03/big-moon-clip.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    /* height: 300px; */
    position: absolute;
    top: 400px;
    top: 0px;
    bottom: -40px;
    width: 100%;
    /* transition: top .2s; */
    transform: translate(0, -40px) rotate(0);
    /* animation: invarteala-lu-ionutz 5s infinite */
}
/* @keyframes invarteala-lu-ionutz {
    100% {
        transform: translate(0, -40px) rotate(360deg);
    }
} */

/* 
    #contact::before {
        position: absolute;
        top: 400px;
        left: 0;
        width: 100%;
        z-index: 1;
        display: block;
        object-fit: contain;
        right: 0;
        bottom: 0;
        content: '';
        background: url(https://fotm.magicode.studio/wp-content/uploads/2022/03/big-moon-clip.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
    } */
}
#contact > div:first-child {
    position: relative;
    padding-top: 142px;
    background-image: url(../images/grid-dark.gif), 
                      url(../images/grid-dark.gif), 
                      url(../images/grid-dark.gif), 
                      url(../images/grid-dark.gif), 
                      url(../images/grid-dark.gif), 
                      url(../images/grid-dark.gif), 
                      url(../images/grid-dark.gif) ;
    background-repeat:  repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;
    background-position: calc(var(--el-grido) / 6 * 0) 0, 
                         calc(var(--el-grido) / 6 * 1) 0, 
                         calc(var(--el-grido) / 6 * 2) 0, 
                         calc(var(--el-grido) / 6 * 3) 0, 
                         calc(var(--el-grido) / 6 * 4) 0, 
                         calc(var(--el-grido) / 6 * 5) 0, 
                         100% 0;
    background-size: auto;
}
#footery .elementor-widget-container {
    display: flex;
    justify-content: center;
}
#footery .elementor-widget-container a {
    color: #F1602C;
    text-decoration: underline;
    margin: 0 20px;
}
#footery + div h3 {
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: bold;
}

@media (max-width: 768px) {
    #tokenomics section {
        padding: 0 20px;
    }
    #tokenomics-inner > div > div:first-child > div {
        flex-direction: column;
    }
    #tokenomics .tokenomics-cards {
        margin-top: 20px;
        width: 100%;
    }
    #tokenomics .tokenomics-cards:last-child {
        width: 100%;
    }
    #tokenomics .tokenomics-cards:nth-child(even) {
        left: 0;
    }
    #tokenomics .tokenomics-cards small {
        padding-right: 16px;
        font-size: 30px;
    }
    #tokenomics-inner > div > div:last-child, 
    #tokenomics::after {
        display: none;
    }
    #footery .elementor-widget-container {
        flex-direction: column;
        align-items: center;
    }
    #big-contact {
        background: url('https://fotm.magicode.studio/wp-content/uploads/2022/03/moon.png') no-repeat center center / auto 100%;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #big-contact > div {
        margin-bottom: 0;
        padding: 0 20px;
    }
    #carousel-moon-carousel > div > div > .elementor-element-populated {
        flex-wrap: wrap;
        width: 100%;
    }
    #carousel-moon-carousel > div > div > .elementor-element-populated > div {
        margin: 50px 20px;
    }
    #carousel-moon-carousel > div > div > .elementor-element-populated > div  {

    }
    #carousel-moon-carousel > div > div >.elementor-element-populated > div .elementor-widget-wrap {
        padding: 58px 30px 43px 30px
    }
    #carousel-moon-carousel > div > div >.elementor-element-populated > div h3 {
        padding-bottom: 35px;
    }

}