:root {
    --black: #000000;
    --green: #687E25;
    --orange: #E78D0D;
    --red: #8E0103;
    --white: #ffffff;
    --Montserrat: 'Montserrat', sans-serif;
    --Proza: 'Proza Libre', sans-serif;
    --Raleway: 'Raleway', sans-serif;
    --xl: 72px;
    --lg: 40px;
    --md: 25px;
    --nrm: 20px;
    --sm: 16px;
    --xs: 14px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--Montserrat);
    font-size: var(--nrm);
    font-weight: 400;
    letter-spacing: 1px;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
    list-style: none;
}

img {
    object-fit: cover;
    width: 100%;
}

/* NAVBAR */

.menu-tab {
    width: 80px;
    height: 80px;
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
    /*end of div*/
    padding: 15px;
}

.menu-tab div {
    width: 33px;
    height: 4px;
    background-color: #2d2d2d;
    display: block;
    margin: 5px 28px;
    transition: all 0.6s ease-in-out;
}

.menu-tab div:nth-child(1) {
    margin-top: 20px;
}

.menu-tab .icon-menu-list,
.menu-tab .icon-menu-active {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    object-fit: contain;
    padding: 15px;
}
.menu-tab.active .icon-menu-list,
.menu-tab .icon-menu-active {
    display: none;
}
.menu-tab.active .icon-menu-active {
    display: block;
}

/*end of menu-tab*/
.menu-tab.active {
    left: 345px;
    transition: all 600ms ease-in-out;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.menu-hide {
    width: 345px;
    left: -345px;
    height: 100vh;
    position: fixed;
    z-index: 10;
    top: 0px;
    transition: all 0.6s ease-in-out;
    /*end of nav*/
}

.menu-hide nav {
    /*end of ul*/
}

.menu-hide nav ul {
    /*end of li*/
}

.menu-hide nav ul li {
    /* height: 70px; */
    list-style-type: none;
    text-align: left;
    line-height: 1;
    transition: all 0.5s ease;
    display: block;
}

.menu-hide nav ul li:hover {
    background-color: var(--orange);
    transition: all 0.5s ease;
}

.menu-hide nav ul li a {
    padding: 30px 25px;
    text-decoration: none;
    color: #f1f1f1;
    font-weight: 500;
    display: block;
}

.menu-hide nav ul li a span {
    transform: translateY(-5px);
    display: inline-block;
}

/*end of menu-hide*/
.menu-hide.show {
    left: 0px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.6s ease-in-out;
    box-shadow: 5px 5px 15px #000000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

nav ul li a .icon-menu-list {
    height: 25px;
    width: 25px;
    object-fit: contain;
    margin-right: 5px;
}

.social-nav {
    position: fixed;
    right: 25px;
    top: 25px;
    z-index: 5;
}

.social-nav li {
    margin-bottom: 15px;
}

.social-nav img {
    width: 40px;
}

.social-nav a {
    background: none;
    border: none;
    cursor: pointer;
}


/* COVERPAGE */
#coverpage {
    position: relative;
    background-image: url('../img/coverpage.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}

#coverpage .coverpage-main {
    display: table;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#coverpage .coverpage-main .coverpage-content {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 100vh;
    z-index: 1;
    text-align: center;
}

#coverpage .coverpage-main .coverpage-bg-blur {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0px 0px 50px 10px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0px 0px 50px 10px rgba(255, 255, 255, 0.2);
    z-index: 0;
}

#coverpage .coverpage-main .coverpage-content .main-logo {
    max-width: 25vw;
    display: block;
    margin: auto;
}

.btn-mint,
.btn-wallet {
    background-color: rgba(255, 255, 255, 0.7);
    color: #000000;
    border: none;
    padding: 20px;
    margin: 25px auto 0 auto;
    margin-top: 60px;
    font-size: 40px;
    border-radius: 3px 25px;
    cursor: pointer;
    display: block;
    transition: 0.2s all;
    width: 300px;
}

.btn-mint:hover,
.btn-wallet:hover {
    background-color: rgb(255, 255, 255);
    transition: 0.2s all;
}

.btn-mint:active,
.btn-wallet:active {
    background-color: #9AD9A2;
    transition: 0.2s all;
}

.btn-wallet {
    font-size: 25px;
    margin: 15px auto 0 auto;
}

.btn-to-go-down {
    background: none;
    border: none;
    padding: 20px;
    margin: 25px auto 0 auto;
    margin-top: 60px;
    cursor: pointer;
    display: block;
    width: 100px;
}

/* THE ELVES */
#nfts-elves {
    background-color: #191718;
    overflow: hidden;
    width: 100%;
}

#nfts-elves div.nft-elfs-container {
    align-items: center;
    display: flex;
    height: 90vh;
    justify-content: space-between;
    margin: 0 auto;
    width: 80%;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text {
    width: 50%;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text h1 {
    color: var(--white);
    font-family: var(--Montserrat);
    font-size: var(--xl);
    font-weight: 800;
    margin-bottom: 12px;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text h1 span {
    color: var(--orange);
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text p {
    color: var(--white);
    font-size: var(--md);
    margin-bottom: 32px;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons {}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a,
section.container article.principals-nfts div.content div.button a {
    border-radius: 25px;
    color: #040b29;
    cursor: pointer;
    display: inline-block;
    font-family: var(--Proza);
    overflow: hidden;
    padding: 12px 22px;
    position: relative;
    transition: all .3s ease;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a span,
section.container article.principals-nfts div.content div.button a span {
    position: relative;
    z-index: 1;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(1),
section.container article.principals-nfts div.content div.button a {
    background-color: var(--orange);
    margin-right: 12px;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(1)::before,
#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(2)::before,
section.container article.principals-nfts div.content div.button a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform .5s;
    z-index: 0;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(1)::before,
section.container article.principals-nfts div.content div.button a::before {
    transform-origin: top;
    transform: scaleY(0);
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(1):hover,
section.container article.principals-nfts div.content div.button a:hover {
    outline: none;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(1):hover::before,
#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(2):hover::before,
section.container article.principals-nfts div.content div.button a:hover::before {
    transition: transform .5s;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(1):hover::before,
section.container article.principals-nfts div.content~a:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(2) {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(2):hover {
    color: #040b29;
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(2)::before {
    transform-origin: right;
    transform: scaleX(0);
}

#nfts-elves div.nft-elfs-container div.nft-elfs-text div.header-buttons a:nth-child(2):hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

#nfts-elves div.nft-elfs-container div.swiper-container {
    background: radial-gradient(51.75% 51.75% at 49.92% 48.25%, #838182 0%, #545253 39.06%, #393838 67.19%, #191718 100%);
    user-select: none;
    width: 43%;
}

#nfts-elves div.nft-elfs-container div.swiper-container .swiper {
    width: 65%;
}
section.container article.principals-nfts p {
    margin-top: 15px;
}
#nfts-elves div.nft-elfs-container div.swiper-container .swiper .swiper-wrapper {}

div.swiper-slide {
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px;
    position: relative;
    transition: all .4s;
    z-index: 0;
}

div.swiper-slide::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -47%;
    top: -16%;
    width: 200%;
    height: 130%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(142deg, #e78d0d 0%, #ae9200 33%, #729100 68%, #298b22 99%);
    animation: rotateBorder 4s linear infinite;
}

div.swiper-slide::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: var(--black);
}

section div.swiper-slide:hover {
    box-shadow: 0px 0px 10px 5px #4d4c4c;
    transform: translateY(-8px);
}

div.swiper-slide .swiper-slide-autor {
    align-items: center;
    display: flex;
    justify-content: space-between;

}

div.swiper-slide .swiper-slide-autor figure.swiper-slide-autor-image {
    align-items: center;
    display: flex;
}

div.swiper-slide .swiper-slide-autor figure.swiper-slide-autor-image img {
    border-radius: 100%;
    height: 50px;
    margin-right: 8px;
    width: 50px;
}

div.swiper-slide .swiper-slide-autor figure.swiper-slide-autor-image span {
    font-size: var(--sm);
    font-weight: bold;
}

div.swiper-slide .swiper-slide-autor a.swiper-slide-autor-options {
    color: var(--white);
}

div.swiper-slide .swiper-slide-autor a.swiper-slide-autor-options i {}

div.swiper-slide .swiper-slide-image {
    margin: 14px 0;
}

div.swiper-slide .swiper-slide-image figure {}

div.swiper-slide .swiper-slide-image figure img {
    width: 100%;
}

div.swiper-slide .swiper-slide-info {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

div.swiper-slide .swiper-slide-info .swiper-slide-info-text {}

div.swiper-slide .swiper-slide-info .swiper-slide-info-text h4 {
    font-weight: bold;
}

div.swiper-slide .swiper-slide-info .swiper-slide-info-text p {
    font-size: var(--xs);
}

div.swiper-slide .swiper-slide-info .swiper-slide-info-text p span {
    color: var(--green);
    font-weight: bold;
}

div.swiper-slide .swiper-slide-info .swiper-slide-info-reaction {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

div.swiper-slide .swiper-slide-info .swiper-slide-info-reaction i {}

div.swiper-slide .swiper-slide-info .swiper-slide-info-reaction span {
    font-size: var(--sm);
    margin-left: 4px;
}

/* PRINCIPAL SECTION */
section.container {
    /* background-color: var(--black); */
    background-color: #060606;
    padding: 120px 0;
    color: var(--white);
}

section.container article {
    margin: 0 auto;
    width: 80%;
}

/* ABOUT US */
#aboutus {
    background-image: url('../img/about-us.png');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 95vh;
}

#aboutus .content {
    align-items: center;
    display: flex;
    justify-content: end;
    margin: 100px 0 100px auto;
    width: 60%;
}

section.container article.about-us {}

section.container article div.title {
    position: relative;
    text-align: center;
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    border-radius: none;
    display: inherit;
}

section.container article div.title div.title-line {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    position: absolute;
    content: "";
}

section.container article div.title div.title-line::after {
    content: "";
    width: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 11px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(142deg, #e78d0d 0%, #298b22 99%);
    border-image-slice: 1;
}

section.container article div.title div.title-line span {
    background: #fff;
    height: 1px;
    display: block;
}

section.container article div.title h2 {
    position: inherit;
    z-index: 1;
    background-color: #000;
    padding-inline: 1rem;
    text-transform: uppercase;
    display: inline-block;
    font-size: var(--md);
    font-family: var(--Proza);
}

section.container article div.content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 80px auto;
    width: 80%;
}

section.container article.about-us div.content figure {
    width: 25%;
}

section.container article.about-us div.content figure img {}

section.container article.about-us div.content p {
    hyphens: auto;
    letter-spacing: 0px;
    line-height: 33px;
    width: 70%;
}

section.container article.principals-nfts div.content {
    width: 100%;
    margin: 80px 0;
    flex-wrap: wrap;
    justify-content: center;
}

section.container article.principals-nfts div.content .swiper-slide {
    width: 24%;
    margin: 0 3px 36px 3px;
}

section.container article.principals-nfts div.content div.button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

section.container article.roadmap .content {
    align-items: stretch;
}

section.container article.roadmap .content .text-box-container {
    width: 46%;
}

section.container article.roadmap .content .text-box-container:nth-child(1) {
    margin-top: 52px;
}

section.container article.roadmap .content .text-box-container:nth-child(3) {
    margin-top: 124px;
}

section.container article.roadmap .content .text-box-container .text-box {
    background-color: #16151A;
    border: 2px solid #26242D;
    margin-bottom: 100px;
    padding: 24px;
    position: relative;
}

section.container article.roadmap .content .text-box-container .text-box:after {
    background-color: var(--orange);
    border-radius: 100%;
    content: "";
    height: 25px;
    position: absolute;
    width: 25px;
    top: 50%;
    z-index: 1;
}

section.container article.roadmap .content .text-box-container:nth-child(1) .text-box:after {
    right: -52px;
}

section.container article.roadmap .content .text-box-container:nth-child(3) .text-box:after {
    left: -52px;
}

section.container article.roadmap .content .text-box-container .text-box .checkbox {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    background-color: var(--orange);
    border-radius: 4px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
}

section.container article.roadmap .content .text-box-container .text-box .checkbox i {
    color: #16151A;
}

section.container article.roadmap .content .text-box-container .text-box .titles {
    margin-bottom: 20px;
}

section.container article.roadmap .content .text-box-container .text-box .titles span {
    font-size: var(--sm);
}

section.container article.roadmap .content .text-box-container .text-box .titles h4 {
    color: var(--orange);
    font-size: var(--md);
    font-weight: 800;
}

section.container article.roadmap .content .text-box-container .text-box .text {}

section.container article.roadmap .content .line {
    width: 8px;
    background-color: #302E38;
    position: relative;
}

section.container article.roadmap .content .line::before,
section.container article.roadmap .content .line::after {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    background-color: #302E38;
    left: -8px;
    border-radius: 100%;
}

section.container article.roadmap .content .line::before {
    top: -24px;
}

section.container article.roadmap .content .line::after {
    bottom: -24px;
}

#faq {
    padding-bottom: 15px;
}

section.container article.faq .content {
    flex-direction: column;
}

section.container article.faq .content .question-box {
    display: flex;
    padding: 16px 8px;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--white);
    width: 100%;
    text-align: justify;
    hyphens: auto;
}

section.container article.faq .content .question-box .text {}

section.container article.faq .content .question-box .text h4.question {
    font-family: var(--Proza);
    margin-bottom: 8px;
    font-size: var(--md);
    color: var(--orange);
}

section.container article.faq .content .question-box .text p.answer {}

section.container article.faq .content .question-box .icon {}

section.container article.faq .content .question-box .icon i {
    font-size: var(--md);
}

section.container article.our-team .content {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
}

section.container article.our-team .content .card-profile {
    text-align: center;
    width: 31%;
    background: #16151a;
    margin-bottom: 40px;
    padding: 28px 0;
    border-radius: 8px;
}

section.container article.our-team .content .card-profile {
    margin-left: 10px;
    margin-right: 10px;
}

section.container article.our-team .content .card-profile figure {
    border-radius: 100%;
    height: 200px;
    margin: 0 auto 20px auto;
    overflow: hidden;
    width: 200px;
}

section.container article.our-team .content .card-profile figure img {}

section.container article.our-team .content .card-profile .card-info {}

section.container article.our-team .content .card-profile .card-info h4 {
    font-size: var(--md);
    margin-bottom: 4px;
    margin-top: 10px;
}

section.container article.our-team .content .card-profile .card-info p {
    font-size: var(--sm);
}

section.container article.our-team .content .card-profile .card-info span {
    margin-top: 16px;
    display: block;
}

section.container article.our-team .content .card-profile .card-info span a {
    color: var(--white);
}

section.container article.our-team .content .card-profile .card-info span a:nth-child(1) {
    margin-right: 4px;
}

section.container article.our-team .content .card-profile .card-info span a i {
    transform: scale(1.2);
}

section.container article.our-team .content .card-profile .card-info a.instagram-account {
    font-size: 15px;
    display: inline-block;
    transition: all 0.5s;
    padding: 3px;
    border-radius: 10px;
}

section.container article.our-team .content .card-profile .card-info a.instagram-account:hover {
    background: #C13584;
    transition: all 0.5s;
}

section.container article.our-team .content .card-profile .card-info .instagram-account i {
    background: #C13584;
    border-radius: 10px;
    padding: 3px;
}

/* .our-team .content .card-profile figure .photo-avatar {
    display: none;
}
.our-team .content .card-profile figure:hover .photo-avatar {
    display: inline-block;
}
.our-team .content .card-profile figure:hover .elf-avatar {
    display: none;
} */
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: none;
    height: 200px;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}


/* Style the back side */
.flip-box-back {
    transform: rotateY(180deg);
}



footer {
    background: #0e0e11;
    /* padding: 40px 0 0; */
    text-align: center;
    position: relative;
}

footer h2 {
    font-family: var(--Proza);
    font-size: var(--md);
    color: var(--white);
    margin-bottom: 20px;
    text-transform: uppercase;
}

footer h2 span {
    color: var(--orange);
}

footer div {
    display: flex;
    justify-content: center;
}

footer div span {
    background: var(--orange);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
}

footer div span i {
    font-size: var(--md);
}

footer>p {
    font-size: var(--xs);
    color: var(--white);
    background-color: var(--black);
    padding: 16px 0;
    margin-top: 40px;
}

footer>p a {
    color: var(--white);
}

@keyframes rotateBorder {
    100% {
        transform: rotate(1turn);
    }
}

footer .video-containter {
    position: relative;
    height: 99vh;
    width: 99vw;
}

footer .video-containter video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


@media screen and (max-width: 1800px) {
    section.container article div.content {
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    section.container article.principals-nfts div.content .swiper-slide {
        margin-left: 3px;
        margin-right: 3px;
        width: 32%;
    }

    #nfts-elves div.nft-elfs-container div.nft-elfs-text p {
        font-size: 20px;
    }

    section.container article.roadmap .content .text-box-container:nth-child(1) .text-box:after {
        right: -42px;
    }

    section.container article.roadmap .content .text-box-container:nth-child(3) .text-box:after {
        left: -42px;
    }

    footer .video-containter {
        height: 100vh;
        width: 100vw;
    }
}

@media screen and (max-width: 1070px) {
    section.container article.our-team .content .card-profile {
        width: 40%;
    }
}

@media screen and (max-width: 1024px) {
    #coverpage .coverpage-main .coverpage-content .main-logo {
        max-width: 40vw;
    }

    #aboutus {
        background-position: left center;
        min-height: 95vh;
    }

    #aboutus .content {
        justify-content: end;
        width: 50%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 10px;
    }

    section.container article.about-us div.content p {
        width: 100%;
        padding: 15px;
    }

    footer .video-containter {
        height: 75vh;
        width: 100vw;
    }

    #nfts-elves div.nft-elfs-container {
        display: block;
        height: auto;
        width: 60%;
    }

    #nfts-elves div.nft-elfs-container div.nft-elfs-text,
    #nfts-elves div.nft-elfs-container div.swiper-container {
        width: 100%;
        display: block;
    }

    #nfts-elves div.nft-elfs-container div.swiper-container {
        padding-top: 50px;
    }
}

@media screen and (max-width: 992px) {
    section.container {
        padding: 100px 0;
    }

    nav .wrapper ul {
        width: 80%;
    }

    #aboutus .content {
        justify-content: center;
        width: 100%;
    }

    section.container article.principals-nfts div.content .swiper-slide {
        margin-left: 5px;
        margin-right: 5px;
        width: 45%;
    }

    section.container article.our-team .content .card-profile {
        width: 45%;
    }

    footer .video-containter {
        height: 55vh;
        width: 100vw;
    }
}

@media screen and (max-width: 768px) {
    .menu-tab {
        width: 60px;
        height: 60px;
    }
    .social-nav {
        position: fixed;
        right: 15px;
        top: 15px;
    }
    .social-nav img {
        width: 35px;
    }
    nav .wrapper ul {
        width: 100%;
    }

    section.container#roadmap article div.content {
        display: block;
    }

    section.container article.roadmap .content .text-box-container {
        width: 100%;
    }

    section.container article.roadmap .content .text-box-container .text-box {
        margin-bottom: 50px;
    }

    section.container article.roadmap .content .text-box-container:nth-child(3) {
        margin-top: 0px;
    }

    section.container article.roadmap .content .text-box-container .text-box:after {
        display: none;
    }

    #nfts-elves div.nft-elfs-container {
        width: 80%;
    }

    section.container article.roadmap .content .line {
        display: none;
    }

    footer .video-containter {
        height: 40vh;
    }

    #coverpage .coverpage-main .coverpage-content .main-logo {
        max-width: 60vw;
    }
    #nfts-elves div.nft-elfs-container div.swiper-container .swiper {
        width: 80%;
    }
    section.container article.principals-nfts p,
    section.container#nfts-elves p,
    section.container#roadmap .text {
        text-align: justify;
        hyphens: auto;
    }
}

@media screen and (max-width: 710px) {
    section.container article.our-team .content .card-profile {
        width: 70%;
    }

    section.container article.principals-nfts div.content {
        display: block;
    }

    section.container article.principals-nfts div.content .swiper-slide {
        width: 90%;
        margin: 50px auto;
    }
}

@media screen and (max-width: 540px) {
    section.container article.our-team .content .card-profile {
        width: 90%;
    }
    footer .video-containter {
        height: 30vh;
    }
}