body {
    font-family: Roboto;
    src: url("./fonts/roboto.ttf");
    padding: 0;
    margin: 0;
    color: white;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

@media screen and (max-width: 95vh) {
    .desktop {
        display: none !important;
    }
}

@media screen and (min-width: 95vh) {
    .mobile {
        display: none !important;
    }
}

.title {
    color: #F9FEFF;
    font-family: "Roboto", Sans-serif;
    font-weight: 500;
    font-size: calc((.4em + 1vmin) + (.4em + 1vmax));
}

h1 {
    color: #F9FEFF;
    font-family: "Roboto", Sans-serif;
    font-weight: 500;
    font-size: calc((.5em + 1.5vmin) + (.5em + 1.5vmax));
}

h2 {
    font-family: "Roboto", Sans-serif;
    font-size: calc((.2em + 1vmin) + (.2em + 1vmax));
    font-weight: 500;
    line-height: calc((.25em + 2vmin) + (.25em + 2vmax));
    text-align: center;
}

h4 {
    font-family: "Roboto", Sans-serif;
    font-size: calc((.1em + 1vmin) + (.1em + 1vmax));
    font-weight: 500;
    line-height: 2em;
}

a {
    text-decoration: none;
}

p {
    font-family: "Roboto", Sans-serif;
    font-size: calc((.08em + 1vmin) + (.08em + 1vmax) + 2px);
    line-height: calc((.15em + 1vmin) + (.15em + 1vmax));
}

div {
    font-family: "Roboto", Sans-serif;
    font-size: calc((.4em + .8vmin) + (.04em + .08vmax));
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(./fonts/fa/fa-brands-400.eot);
    src: url(./fonts/fa/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(./fonts/fa/fa-brands-400.woff2) format("woff2"), url(./fonts/fa/fa-brands-400.woff) format("woff"), url(./fonts/fa/fa-brands-400.ttf) format("truetype"), url(./fonts/fa/fa-brands-400.svg#fontawesome) format("svg")
}

.fab {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    color: white;
    font-size: calc(2em + 1vmin + 1vmax);
}

.fa-opensea {
    width: calc(2em + 1vmin + 1vmax);
    height: calc(2em + 1vmin + 1vmax);
    content: url(./images/logos/opensea-logomark-transparent-white.svg);
}

.fa-etherscan {
    width: calc(2em + 1vmin + 1vmax);
    height: calc(2em + 1vmin + 1vmax);
    content: url(./images/logos/etherscan-logo-circle.svg);
}

.fa-discord:before {
    content: "\f392"
}

.fa-linkedin:before {
    content: "\f08c"
}

.fa-instagram:before {
    content: "\f16d"
}

.fa-twitter:before {
    content: "\f099"
}

.flexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	flex-basis: 20%;
}

.flexCol {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainImage {
    position: absolute;
    width: calc((2em + 30vmin) + (2em + 30vmax));
    max-height: 110%;
    max-width: 60%;
    bottom: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    cursor: default;
}

.maingBackground {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    background-image: linear-gradient(108.25deg, #400057 0%, #CF14D2 100%);
    position: relative;
    overflow: hidden;
}

.particleBackground {
    position: absolute;
    bottom: 0;
    z-index: 0;

    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    cursor: default;
    mix-blend-mode: lighten;
}

.participate_text {
    color: #F9FEFF;
    font-family: "Roboto", Sans-serif;
    font-weight: 400;
    margin: -1em 0 2em;
    width: 80%;
}

.mainInfo {
    margin: 5vmax 0 2em 3em;
    text-align: center;
    width: 40%;
    z-index: 3;
}

.mint-background {
    background: linear-gradient(292.24deg, #83005E -40.3%, #130A2B 106.64%);
}

.mint-button {
    background: linear-gradient(251.2deg, #E7007F -21.26%, #6E00A8 108.25%);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: calc((.01em + .1vmin) + (.01em + .1vmax)) solid white;
    border-radius: calc((.2em + 2vmin) + (.2em + 2vmax));
    height: auto;
    width: auto;
    margin: 2em 0 2em;
    padding: calc((.2em + .1vmin) + (.2em + .1vmax)) calc((.4em + .1vmin) + (.4em + .1vmax));
    color: #F9FEFF;
    font-size: calc((.025em + .7vmin) + (.025em + .7vmax));
    text-align: center;
    font-weight: bold;
}

.connect-button {
    width: 20%;
    margin: 2em 0 0 0;
}

.mint-button>a {
    color: #F9FEFF;
    font-size: calc(.1em + .7vmin + .7vmax);
    text-align: center;
    font-weight: bold;
}

.mint-button:hover {
    transform: scale(1.01);
    animation-name: mint-hover;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    box-shadow: outset 5px 5px 5px rgba(0, 0, 0, 0.368);
}

@keyframes popup-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mint-hover {

    0% {
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(110, 0, 168) 108.25%);
    }

    10% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(122.1, 0, 163.9) 108.25%);
    }

    20% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(134.2, 0, 159.8) 108.25%);
    }

    30% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(146.3, 0, 155.7) 108.25%);
    }

    40% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(158.4, 0, 151.6) 108.25%);
    }

    50% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(170.5, 0, 147.5) 108.25%);
    }

    60% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(182.6, 0, 143.4) 108.25%);
    }

    70% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(194.7, 0, 139.3) 108.25%);
    }

    80% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(206.8, 0, 135.2) 108.25%);
    }

    90% {
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(218.9, 0, 131.1) 108.25%);
    }

    100% {
        box-shadow: inset 0 0 20px white;
        background: linear-gradient(251.2deg, rgb(231, 0, 127) -21.26%, rgb(231, 0, 127) 108.25%);
    }



}

.mint-input {
    height: calc((.4em + 1vmin) + (.4em + 1vmax));
    width: 15%;
    border: calc((.01em + .1vmin) + (.01em + .1vmax)) solid #F113B3;
    background: #130A2B;
    border-radius: calc((.4em + 1vmin) + (.4em + 1vmax));
    text-align: center;
    color: white;
    font-size: calc((.4em + 1vmin) + (.4em + 1vmax));
    margin-top: calc((.1em + 1vmin) + (.1em + 1vmax));
    position: relative;
    display: flex;
    flex-direction: row;

}

.mint-number {
    background: #130A2B;
    height: 90%;
    margin: auto;
    padding: none;
    border: none;
    color: white;
    font-size: calc((.1em + 1vmin) + (.1em + 1vmax));
    width: 80%;
    flex: 1;
    text-align: center;

}

.mint-symbol {
    margin: auto;
    font-size: calc((.1em + 1vmin) + (.1em + 1vmax));
    cursor: pointer;

}

.mint-symbol:hover {
    transform: scale(1.35);
    font-weight: bold;
    color: #E7007F;
}

.page-block {
    width: 100%;
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
}

.pink-background {
    background: linear-gradient(108.25deg, #6E00A8 0%, #9C0383 100%);
}

.pink-background h1::-moz-selection {
    background-color: #130a2b;
}

.pink-background h3::selection {
    background-color: #130a2b;
}

.pink-background h4::selection {
    background-color: #130a2b;
}




.darkblue-background {
    background-color: #130a2b;
}

::-moz-selection {
    background-color: #E7007F;
}

::selection {
    background-color: #E7007F;
}


.roadmap_box {
    justify-content: center;
    width: 80%;
    position: relative;
}

.roadmap_line {
    background-color: #AB57FF;
    width: calc((.1em + .3vmin) + (.1em + .3vmax));
    height: 100%;
    border-radius: calc((.01em + 1vmin) + (.01em + 1vmax));
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.phase {
    height: auto;
    width: 100%;
}

.phase-title {
    background: linear-gradient(251.2deg, #E7007F -21.26%, #6E00A8 108.25%);
    border-radius: calc((.1em + 1vmin) + (.1em + 1vmax));
    height: calc((.2em + 1vmin) + (.2em + 1vmax));
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc((.1em + 1vmin) + (.1em + 1vmax));
	
	font-size: calc(.25em + 1vmin + 1vmax + 2px);
    line-height: calc(.3em + 1vmin + 1vmax);
	font-weight: 1000;
}

.phase-description {
    height: auto;
    width: 90%;
    margin: auto;
    margin-top: 10px;
	
	font-size: calc(.36em + 1vmin + 1vmax + 2px);
    line-height: calc((.15em + 1vmin) + (.15em + 1vmax));
}

.phase-col {
    flex: 1;
    margin: 10px 10px 50px;
    width: 100%;
    position: relative;
    max-width: 40%;
    transform: translateX(calc(50% + (.1em + 1vmin) + (.1em + 1vmax)));
}

.phase-col:nth-child(odd) {
    transform: translateX(calc(-50% - ((.1em + 1vmin) + (.1em + 1vmax))));
}

.phase-circle {
    width: calc((.39em + 1vmin) + (.39em + 1vmax));
    height: calc((.39em + 1vmin) + (.39em + 1vmax));
    border-radius: 50%;
    background: linear-gradient(#FCFCFC, #d687d4);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    position: absolute;
    top: - calc((.1em + 1vmin) + (.1em + 1vmax));
    transform: translateX(calc(-50% - ((.1em + 1vmin) + (.1em + 1vmax))));
}

.phase-col:nth-child(odd)> :first-child {
    right: 0;
    transform: translateX(calc(50% + ((.1em + 1vmin) + (.1em + 1vmax))));
}

.pilar {
    margin: 0 auto calc((.1em + 1vmin) + (.1em + 1vmax));
    width: calc((10em + 8vmin) + (10em + 8vmax));
    max-width: 100%;
    padding: 25px;
    top: 0;

    color: #FFFFFF;
    font-size: calc((.4em + .8vmin) + (.04em + .08vmax));
    font-weight: 400;
    text-align: center;
}

.pilar img {
    width: 100%;
    height: calc((.5em + 10vmin) + (.5em + 10vmax));
    ;
    margin: 0;
    padding: 0;
    border: 0;
    top: 0;
    object-fit: contain;
}

.pilar h2 {
    margin: 0 auto auto;
    padding: 0;
    border: 0;
    top: 0;
    text-align: center;
	font-size: calc(1em + 1vmin + 1vmax);
	font-weight: bolder;
}

.pilar h4 {
    text-align: center;
    margin-top: 15px;
}

.pilar p {
    height: auto;
	font-size: calc(.5em + 1vmin + 1vmax);
}

.founder {
    border-radius: 15px;
    border: calc((.02em + .1vmin) + (.02em + .1vmax)) solid white;
    width: calc((3em + 4vmin) + (3em + 4vmax)) !important;
    height: calc((3em + 4vmin) + (3em + 4vmax));
}

.time-img {
    border-radius: 15px;
    border: calc((.02em + .1vmin) + (.02em + .1vmax)) solid white;
    width: calc((2em + 3vmin) + (2em + 3vmax)) !important;
    height: calc((2em + 3vmin) + (2em + 3vmax));
}

#about {
    text-align: center;
    font-family: "Roboto", Sans-serif;
    font-size: calc((.1em + 1vmin) + (.1em + 1vmax));
    font-weight: 400;
    text-transform: none;
    font-style: normal;
}

.popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.566);
    backdrop-filter: blur(20px);
    display: flex;
    border-radius: 15px;
    animation: popup-fade;
    z-index: 99;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    box-shadow: outset 5px 5px 5px rgba(0, 0, 0, 0.368);
}

@keyframes popup-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.error-message {
    background-color: rgb(229, 48, 48);
}

.concluded-message {
    background-color: rgb(63, 229, 48);
}

.popup-message {
    width: 75%;
    max-width: 25em;
    max-height: 75%;
    margin: auto;

    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    animation: popup-grow;
    z-index: 99;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    box-shadow: outset 5px 5px 5px rgba(0, 0, 0, 0.368);
}

@keyframes popup-grow {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.message-text {
    background-color: white;
    color: black;
    margin: auto;
    text-align: center;
    padding: 1em;
    font-size: calc((.2em + 1vmin) + (.2em + 1vmax));
    font-family: Roboto;
}

.minted-message {
    background-color: rgb(110, 0, 168);
}

.close-message {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.brand {
    width: calc((3em + 4vmin) + (3em + 4vmax)) !important;
    margin: 1em 3em 1em;
}

.brand-parceiros {
    width: 10% !important;
    margin: 1em 3em 1em;
}

.form-input {
    border: none;
    border-radius: calc((.1em + .1vmin) + (.1em + .1vmax));
    font-size: calc((.07em + .7vmin) + (.07em + .7vmax));
    padding: .2em;
}

::placeholder
{
	color: rgb(192, 192, 192);
	
}

.time h4 {
    margin-top: -10%;
	margin-bottom: 0px;
    text-align: center;
    line-height: calc((.12em + 1vmin) + (.12em + 1vmax));
	font-size: calc((.05em + .7vmin) + (.05em + .7vmax));
}

.time h2 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: calc((.1em + 1vmin) + (.1em + 1vmax));
}

.time {
    margin: 15px 25px 0 0;
}

footer {
    width: 100%;
    min-height: 6vw;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.eve_fotter_logo_parent {
    height: 6vw;
    width: 20%;
}

.eve_fotter_links {
    width: 50%;
}

.eve_fotter_logo {
    height: 85%;
    bottom: 0px;
    left: 12%;
    object-fit: contain;
}

.contact_line {
    width: 30%;
}

.contact_line_full {
    width: calc(30% - .4em);
}

.footer_links_parent {
    width: 40%;
}

.footer_links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 40px 10% 0px;
    text-align: center;
}

.footer_links * {
    width: auto;
    color: white;
    font-family: Sans-serif;
    font-size: calc((.1em + .5vmin) + (.1em + .5vmax));
}

.footer_cc {
    font-size: calc((.05em + .3vmin) + (.05em + .3vmax));
}

footer i {
    font-size: 12px;
    width: 10px;
}

.footer_share_parent {
    width: 25%;
}

#form_button_submit {
    margin: calc((1em + 1vmin) + (1em + 1vmax)) 30px calc((.5em + 1vmin) + (.5em + 1vmax));
    background-color: #0D102C;
    color: #ffffff;
    font-family: Sans-serif;
    font-size: calc((.1em + .6vmin) + (.1em + .6vmax));
    font-weight: 600;
    border-style: solid;
    border-width: 0px;
    border-radius: calc((.1em + 1vmin) + (.1em + 1vmax));
    padding: calc((.1em + .6vmin) + (.1em + .6vmax));
    cursor: pointer;
}



/* MOBILE*/
.founders-scroll {
    overflow: auto;
    white-space: nowrap;
    display: block;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: auto;

}

.founders-mobile {
    width: calc((1em + 10vmin) + (1em + 10vmax));
    position: relative;
    display: inline-block;
    justify-content: space-between;
    align-items: center;
}

.time-mobile {
    width: calc((1em + 8vmin) + (1em + 8vmax));
    position: relative;
    display: inline-block;
    justify-content: space-between;
    align-items: baseline;
}

.brand-mobile {
    width: calc((3em + 4vmin) + (3em + 4vmax)) !important;
    height: 100%;
    margin: 0 1em 2em;
    position: relative;
    display: inline-flex;

    align-items: center;
    justify-content: center;
    text-align: center;
}


.founders-mobile h2 {
    text-align: center;
    width: 100%
}

.founders-mobile h4 {
    text-align: center;
    width: 100%
}


.time-mobile h2 {
    text-align: center;
    width: 100%;
}

.time-mobile h4 {
    text-align: center;
    width: 100%;
    line-height: calc((.12em + 1vmin) + (.12em + 1vmax));
}

.founder-box {
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 1em 2em;
}

.founder-network {
    height: calc((.1em + .5vmin) + (.1em + .5vmax));
    width: 80%;
    display: flex;
    margin: 1em 0% -1em;
    justify-content: space-between;
    align-items: center;
}

.founder-network * {
    font-size: calc((.2em + 1vmin) + (.2em + 1vmax));
}

@media screen and (max-width: 95vh) {

    .mint-input {
        width: 25%;
    }

    .phase-col {
        transform: none;
        max-width: 95%;
    }

    .phase-col:nth-child(odd) {
        transform: none;
    }

    .roadmap_line {
        left: 0;
    }

    .phase-circle {
        transform: translateX(calc(-50% - 1.1em));
    }

    .phase-col:nth-child(odd)> :first-child {
        left: 0px;
        transform: translateX(calc(-50% - 1.1em));
    }

    .mainInfo {
        width: 90%;
        margin: auto;
        transform: none;
    }

    .mint-button {
        font-size: calc(.1em + 1vmin + 1vmax);
        width: 70%;
    }

    .mainImage {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0;
        border: 0;
        right: initial;
    }

    .maingBackground {
        height: auto;
    }

    footer {
        min-height: 40vw;
        flex-direction: column;
    }

    footer * {
        width: 90%;
        height: auto;
    }

    .footer_links_parent {
        width: 70%;
    }

    .footer_share_parent {
        width: 90%;
    }

    .eve_fotter_logo_parent {
        width: 75%;
        height: auto;
        margin-top: 50px;
    }

    .eve_fotter_logo {
        height: 35vw;
        width: auto;
        position: relative;
        object-fit: contain;
    }

    .contact_line {
        width: 90%;
    }

    .contact_line_full {
        width: calc(90% - .4em);
    }

    .founder-network {
        padding: 0 10%;
        justify-content: space-evenly;
    }

    .founder {
        margin: 0 calc((.6em + .8vmin) + (.6em + .8vmax))
    }

    .time-img {
        margin: 0 calc((.5em + .8vmin) + (.5em + .8vmax));
    }

    .connect-button {
        width: 40%;
        margin: 2em 0 1em 0;
    }
}

.mint-background p {
    font-size: calc((.08em + 1vmin) + (.08em + 1vmax) + 2px);
}