#io-header i.fab {
    color:#1d1d1d;
}
#io-header .elementor-nav-menu li:last-child {
padding:0 1px 1px 1px;
background: rgb(132,250,255);
background: -moz-linear-gradient(90deg, rgba(132,250,255,1) 0%, rgba(132,250,255,0.4990371148459384) 12%, rgba(241,96,44,1) 13%, rgba(241,96,44,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(132,250,255,1) 0%, rgba(132,250,255,0.4990371148459384) 12%, rgba(241,96,44,1) 13%, rgba(241,96,44,1) 100%);
background: linear-gradient(90deg, rgba(132,250,255,1) 0%, rgba(132,250,255,0.4990371148459384) 12%, rgba(241,96,44,1) 13%, rgba(241,96,44,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#84faff",endColorstr="#f1602c",GradientType=1);
}
#io-header .elementor-nav-menu li:last-child a {
    background: none;
    background-color: #1d1d1d;
    background-image: url(/wp-content/themes/fotm/images/moon-button-bg.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 30px);
    padding-right: 50px;
    padding-left: 30px;
}
#io-header .elementor-nav-menu li:last-child,
#io-header .elementor-nav-menu li:last-child a {
    border-radius:40px;
}
#io-header .elementor-nav-menu li:last-child a:hover {
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
}



#io-first-fold > .elementor-container,
#io-first-fold-m > .elementor-container {
    padding-top:90px;
    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 * 1) 400px,
                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 * 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;
}

.io-first-fold-element {
    position:absolute!important;
    bottom:0;
}
.io-first-fold-element span {
    font-size: 13px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 15px;
    display: block;
    background: #1d1d1d;
    color: #fff;
    margin-top: 5px;
    margin-bottom: -6px;
}
.io-first-fold-element bu {
    background: #1d1d1d;
    color: #fff;
    width: fit-content;
    display: inline-block;
    padding: 5px 20px 5px 13px;
}
#io-element-3 bu span {
    margin-bottom:-2px;
}


#io-element-1,
#io-element-1-m {
    top: 192px;
    left: calc(var(--el-grido) / 6 * 1 - 69px);
}
#io-element-2,
#io-element-2-m {
    top: 420px;
    left: 0px;
}
#io-element-2 > .elementor-widget-container > bu,
#io-element-2-m  > .elementor-widget-container > bu {
    position: relative;
}
#io-element-2 > .elementor-widget-container > bu::after,
#io-element-2-m > .elementor-widget-container > bu::after {
    content: 'Maximum supply: 3600';
    position: absolute;
    bottom: -26px;
    left: 0;
    background: #4a4a4a;
    border-top: 1px solid #84faff;
    width: 100%;
    height: fit-content;
    font-size: 13px;
    line-height: 15px;
    font-weight: 400;
    color: #84faff;
    padding: 5px 0 5px 15px;
}

#io-element-3,
#io-element-3-m {
    top: 570px;
    left: calc(var(--el-grido) / 6 * 2 - 72px);
}
#io-element-4,
#io-element-4-m {
    left: -69px;
    top: 720px;
}
#io-element-5 > .elementor-widget-container,
#io-element-5 > .elementor-widget-container {
    background-size: 82px!important;
    background-position: 5px 0!important;
}
#io-element-5,
#io-element-5-m {
    top: 670px;
    left: calc(var(--el-grido) / 6 * 1 - 45px);
}
#io-element-6,
#io-element-6-m {
    width:320px;
    height:92px;
    top:965px;
}
#io-element-6 p,
#io-element-6-m p {
    line-height: unset!important;
}
.io-text-sticky {
    position: fixed!important;
    width: 100%;
    top:0;
    left:0;
}

#io-first-fold-vertical,
#io-first-fold-vertical-m {
    position: relative;
}
#io-first-fold-vertical:before,
#io-first-fold-vertical-m:before {
    content: '01.5687A';
    font-size: 11px;
    line-height: 15px;
    color: #343434;
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: -265px;
    left: calc(var(--el-grido) / 6 * 2);
    transform: translate(-110%, 0);
}
#io-first-fold-vertical:after,
#io-first-fold-vertical-m:after {
    content: '07.258R';
    font-size: 11px;
    line-height: 15px;
    color: #343434;
    width: fit-content;
    height: fit-content;
    position: absolute;
    bottom: 243px;
    left: 6px;
}
.io-first-fold-button {
    display: inline-block;
    width: fit-content!important;
    margin-right: 10px;
    position: absolute!important;
    bottom: -70px;
    z-index:999;
}
.io-first-fold-button.io-second-button {
    left:150px;
}
.io-first-fold-button.io-third-button {
    left:315px;
}
#io-second-fold-bgclip {
    clip-path: polygon(calc((100vw - var(--el-grido)) / 2 - 8px) 0, 100% 0, 100% 100%, calc((100vw - var(--el-grido)) / 2 - 8px) 100%);
}
#io-moon-hover1, 
#io-moon-hover2 {
    width: fit-content!important;
}
#io-moon-hover2 {
    transform: scale(0.35) translate(-80%, 93%);
    transition: all 0.1s ease-in-out;
}
#io-moon-hover2.io-default-state {
    transform: scale(1) translate(0,0);
}

.io-underline-bullet img {
    height: auto!important;
    max-width: 821px!important;
}

#io-about-bg1 {
    background: url('../images/about-bg2.svg') no-repeat,
                url('../images/about-bg1.svg') no-repeat;
    background-position: 100% 62%,  100% 76%;
}
.io-galaxy-text {
    padding-left: calc(((100vw - var(--el-grido)) / 2) + 110px);
    position: relative;
}
#io-galaxy-holder {
    position:relative;
    background-size: 68% auto!important;
    background-position: -30% -150%!important;
    background-position: -30% 0%!important;
}
#io-galaxy-holder:before,
#io-galaxy-holder:after {
    content: 'Hab. A24.DDH';
    width: calc(var(--el-grido) / 2 - 210px);
    height: 29px;
    position: absolute;
    left: calc((100vw - var(--el-grido)) / 2 + 340px);
    top: 345px;
    background: url(../images/galaxy-line1.svg) no-repeat center left;
    font-size: 11px;
    line-height: 15px;
    font-family: 'Roboto Mono', sans-serif;
    color: #fff;
    text-align: right;
    padding-top: 13px;
}
#io-galaxy-holder:after {
    content: 'X368.02 /B4';
    left: calc((100vw - var(--el-grido)) / 2 + 660px);
    top: 485px;
}
.io-galaxy-text.io-galaxy-underline:after {
    content: '';
    width: 100%;
    height: 133px;
    position: absolute;
    background: url(../images/reverse-pointer.svg) no-repeat;
    background-position: 0 0;
    top: 120%;
    left: calc(((100vw - var(--el-grido)) / 2) + 9px);
}

.io-moon-show {
    display: inline-block;
}
.io-moon-hide {
    display: none!important;
}
.io-galaxy-text.io-galaxy-line:after {
    content: '';
    width: 100%;
    height: 133px;
    position: absolute;
    background: url(../images/inline-pointer.svg) no-repeat;
    background-position: 0 0;
    top: 120%;
    left: calc(((100vw - var(--el-grido)) / 2) + 110px);
}
#io-moon-slice .e-hosted-video {
    padding: 0;
    height: auto;
}
 #io-moon-slice video {
    max-width: 492px!important;
    mix-blend-mode: lighten;
    position: relative;
    bottom: -200px;
    left: 100px;
} 
#io-video-button {
    position: absolute;
    bottom: -120px;
    left: calc(((100vw - var(--el-grido)) / 2) + 110px);
    width: fit-content;
}
#io-video-button a {
    background: url(../images/vbutton.svg) no-repeat top left;
    height: 75px;
    width: 190px;
}

.io-galaxy-column-right:after {
    content: 'Moon Plot. SINUS MEDII';
    width: calc(var(--el-grido) / 2 - 360px);
    height: 29px;
    position: absolute;
    left: calc((100vw - var(--el-grido)) / 2 + 210px);
    bottom: 147px;
    background: url(../images/galaxy-line1.svg) no-repeat center left;
    font-size: 11px;
    line-height: 15px;
    font-family: 'Roboto Mono', sans-serif;
    color: #fff;
    text-align: right;
    padding-top: 13px;
}
.io-nft-title h2 {
    width: fit-content;
    margin: 0 auto;
    background: #1d1d1d;
    padding: 39px 130px 44px 130px;
    border-bottom: 2px solid #bc4f28;
    border-left: 1px solid #bc4f28;
    border-top: 3px solid #84faff;
    border-right: 3px solid #84faff;
}
.io-nft-title.io-orange h2 {
    background: #F1602C;
}


/* glitchy */
/*
#io-glitch-1 h2, #io-glitch-2 h2 {
    position: relative;
    transform: scale3d(1,1,1);
}
#io-glitch-1 h2::after,
#io-glitch-1 h2::before,
#io-glitch-2 h2::after,
#io-glitch-2 h2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #ffffff;
    color: #1d1d1d;
    clip: rect(500, 2200px, 200, 500);
}

#io-glitch-1 h2::before,
#io-glitch-2 h2::before {
    left: 7px;
    text-shadow: 1px 0 #84FAFF;
    animation: glitch-effect 3s infinite linear alternate-reverse;
}

#io-glitch-1 h2::after,
#io-glitch-2 h2::after {
    left: 3px;
    text-shadow: -1px 0 #bc4f28;
    animation: glitch-effect 2s infinite linear alternate-reverse;
}

.io-glitch h2 {
    position: relative;
    transform: scale3d(1,1,1);
}
.io-glitch h2::after,
.io-glitch h2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #ffffff;
    color: #1d1d1d;
    clip: rect(500, 2200px, 200, 500);
}
.io-glitch h2::before {
    left: 7px;
    text-shadow: 1px 0 #84FAFF;
    animation: glitch-effect 3s infinite linear alternate-reverse;
}
.io-glitch h2::after {
    left: 3px;
    text-shadow: -1px 0 #bc4f28;
    animation: glitch-effect 2s infinite linear alternate-reverse;
}

.io-glitch.glitcheala2 h2::before {
    animation: glitch-effect2 3s infinite linear alternate-reverse;
}
.io-glitch.glitcheala2 h2::after {
    animation: glitch-effect2 2s infinite linear alternate-reverse;
}

#tokenomics-title h2:after,
#tokenomics-title h2:before {
    color: #f3f3f3;
    background: #fff;
}
#about-title h2:after,
#about-title h2:before {
    color: #1d1d1d;
    background: #1d1d1d;
}
*/



body > div[data-elementor-type="wp-page"] {
    overflow: hidden;
}

@keyframes rotate {
    from {
      background-position: 0px 0px;
    }
    to {
      background-position: 1742px 0px;
    }
  }
  @-webkit-keyframes rotate {
    from {
      background-position: 0px 0px;
    }
    to {
      background-position: 1742px 0px;
    }
  }

  #io-big-moon {
      pointer-events: none;
  }

  #io-big-moon img,
  #io-about-moon img {
    width: 691px!important;
    height: 692px!important;
    background: url(https://fotm.magicode.studio/wp-content/uploads/2022/03/moonmap.jpg);
    border-radius: 50%;
    background-size: 1742px;
    box-shadow: inset -25px -72px 165px 36px rgb(0 0 0), inset -6px 0 12px 4px rgb(255 255 255 / 30%),
    -10px 30px 80px -10px rgb(0 0 0 / 26%);
    animation-name: rotate;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 18s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }
#io-special-cursor {
    position: absolute;
    visibility: hidden;
    width: fit-content;
    height: fit-content;
    font-size:16px;
    line-height:1;
    font-weight:500;
    font-family: 'Roboto Mono';
    letter-spacing: 2px;
    transform: translate(-210px, -220px);
    color: #fff;
}
.io-first-fold-element bu{
    width: 200px;
    min-width: 150px;
}


/* partner logo's section */
.io-partner-logo {
    margin: 0!important;
    width: 120px!important;
    height: 120px;
    border-radius: 50%;
    display: block;
    position: absolute!important;
    top: 0;
}
.io-partner-logo > .elementor-widget-container {
    background-color: #1d1d1d!important;
    border-radius: 50%;
    border: 1px solid #37321e;
    padding:0!important;
    height: 100%!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.io-partner-logo > .elementor-widget-container  img {
    max-width: 60%!important;
    height: auto!important;
}
#io-partner-logo1 {
    top: 0;
    left:15%;
}

#io-partner-logo2 {
    top:5%;
    left:40%;
}
#io-partner-logo2 img {
    max-width:500%!important;
    width: 158px!important;
    margin-left: -19px;
}
#io-partner-logo3 {
    top:0;
    left:60%;
}
#io-partner-logo3 img {
    max-width: 500%!important;
    width: 150px!important;
    margin-left: -13px;
}
#io-partner-logo4 {
    top:20%;
    left:25%;
}
#io-partner-logo4 img {
    max-width: 500%!important;
    width: 120px!important;
}
#io-partner-logo5 {
    top:28%;
    left:50%;
    z-index:5;
}
#io-partner-logo5 img {
    max-width: 500%!important;
    width: 178px!important;
    margin-left: -31px;
}

/* earn rewards section */
.io-earn-rewards {
    z-index:5;
}
.io-earn-rewards > .elementor-container > .elementor-column {
    background-color: #84faff;
    background-image: url('../images/bg-dark-fotm.png');
    background-repeat: repeat;
    background-position: 0 0;
    position: relative;
}
.io-earn-rewards > .elementor-container > .elementor-column::before {
    content: '';
    position: absolute;
    top: 11%;
    left: 5%;
    width: 490px;
    height: 490px;
    background-color: #84faff;
    border: 1px solid #54B7BB;
    border-radius: 50%;
    z-index: 1;
}
.io-earn-rewards > .elementor-container > .elementor-column::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(5% + 240px);
    width: 1px;
    height: 490px;
    background-color: #54B7BB;
    z-index:0;
}
.io-earn-rewards > .elementor-container > .elementor-column > .elementor-widget-wrap::before {
    content: '';
    position: absolute;
    bottom: 6%;
    left: 80%;
    width: 260px;
    height: 260px;
    background-color: #84faff;
    border: 1px solid #54B7BB;
    border-radius: 50%;
    z-index: 1;
}
.io-earn-rewards > .elementor-container > .elementor-column > .elementor-widget-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(80% + 130px);
    width: 1px;
    height: 490px;
    background-color: #54B7BB;
    z-index:0;
}
.io-earn-rewards > .elementor-container > .elementor-column > .elementor-widget-wrap {
    z-index:2;
}



@media only screen and (max-width: 765px) {
    #io-first-fold-m > .elementor-container {
        padding-top:40px;
    }
    #io-header-m {

    }
    #io-first-fold-vertical-m {
        width: fit-content;
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translate(-18%,0);
    }
    #io-first-fold-vertical-m h2 {
        white-space: nowrap;
    }
    #io-moon-menu-m {
        position: absolute;
        top: -70px;
        left: 72vw;
        z-index: 1;
        visibility:hidden;
        width: 192px;
        max-width: 192px;
    }
    #io-big-moon-m {
        position: fixed;
        top: 68px;
        left: 50px;
        transition: all 0.5s ease-in-out;
        visibility: visible;
    }
    #io-glitch-2-m {
        position: absolute;
        top: -303px;
    left: 17px;
    }
    #io-first-fold-m br {
        display:none;
    }
    #io-first-fold-m .elementor-widget-text-editor {
        margin-top: 100px;
        width: 90%;
        margin-left: 5%;
    }

    #io-first-fold-m > .elementor-container {
        background-color: #fff;
        background-image: 
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif'),
                url('../images/grid.gif')              
                ;
    background-repeat: repeat-y;
    background-position: 
                calc(100vw / 6 * 1) 0, 
                calc(100vw / 6 * 2) 0,
                calc(100vw / 6 * 3) 0,
                calc(100vw / 6 * 4) 0,
                calc(100vw / 6 * 5) 0
                ;
    background-size: auto;
    }
    #io-element-1-m {
        margin:0;
        top: 29px;
        left: calc(100vw / 6 * 1 - 4px);
    }
    #io-element-2-m {
        top: 170px;
        left: calc(100vw / 6 * 1 - 85px);
    }
    #io-element-3-m {
        top: 330px;
        left: calc(100vw / 6 * 2 - 84px);
    }
    #io-element-4-m {
        top: 535px;
        left: calc(100vw / 6 * 3 - 89px);
    }
    #io-element-5-m {
        top: 706px;
        left: calc(100vw / 6 * 1 - 64px);
    }
    .io-galaxy-text {
        padding-left: 0;
        position: relative;
    }
    .io-galaxy-text:after, .io-galaxy-column-right:after {
        display:none;
    }
    .io-underline-bullet img {
        width: 240vw!important;
    }
    .io-moon-plot-m img {
        mix-blend-mode: lighten;
    }
    .io-video-button {
        left: 10%;
    }
    .io-video-button a {
        background-color: transparent!important;
        background: url(../images/vbutton.svg) no-repeat top left;
        height: 75px;
        width: 190px;
    }
    .io-nft-title h2 {
        width: 100%;
        background: #F1602C;
        padding: 10px;
        text-align: left;
        padding: calc(10% - 10px);
        border: none;
    }
    .io-slider-m .elementor-swiper-button-prev {
        top: 250px;
        left: 30%;
    }
    .io-slider-m .elementor-swiper-button-next {
        top: 250px;
        right:30%;
    }
    .io-slider-m .elementor-slides-wrapper {
        background-color: #1d1d1d;
        background-image: url('../images/arrows.svg');
        background-repeat: no-repeat;
        background-size: auto 90%;
        background-position: 5%;
    }
    #io-header-m {
        overflow: visible;
    }
    .io-menu-m nav.elementor-nav-menu--dropdown {
        position: absolute;
        z-index: 9999999999999;
        background: #bc4f28;
        right: 19px;
        top: 35px;  
    }
    .io-menu-m nav.elementor-nav-menu--dropdown ul{
        border: 1px solid #fff;
        padding: 18px 0;
    }
    .elementor-nav-menu--dropdown a {
        color: #fff!important;
    }
    #io-element-6-m {
        top: 805px;
        left: calc(100vw / 6 * 1 - 90px);
    }
    #io-element-6-m .elementor-widget-container {
        background-position: 30px 10px!important;
    }
    .io-text-sticky {
        top:auto;
        left:0;
        bottom:0;
        padding: 10px 20px!important;
    }
    .io-earn-rewards > .elementor-container > .elementor-column > .elementor-widget-wrap::before,
    .io-earn-rewards > .elementor-container > .elementor-column > .elementor-widget-wrap::after {
        display: none;
    }
    .io-first-fold-button.io-third-button {
        left: 150px;
        bottom: -140px;
    }
}

@media only screen and (max-width: 375px) {
    #io-glitch-2-m {
        position: absolute;
        top: -339px;
        left: 30px;
    }
}