@font-face {
    font-family: nexaSlabRegular;
    src: url(../fonts/nexa-slab-regular.otf);
}
@font-face {
    font-family: nexaSlabBold;
    src: url(../fonts/nexa-slab-bold.otf);
}
@font-face {
    font-family: nexaSlabBlack;
    src: url(../fonts/nexa-slab-black.ttf);
}
body {
    font-family: 'nexaSlabRegular', sans-serif;
    font-size: 14px;
    color: #fff;
    background: #000;
}
img {
    max-width: 100%;
}
a {
    color: #464646;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
a:hover {
    color: #df0023;
}
h1,h2,h3,h4,h5,h6 {
    font-family: nexaSlabBlack;
}
.fontRegular {
    font-family: nexaSlabRegular;
}
.fontBold {
    font-family: nexaSlabBold;
}
.fontBolder {
    font-family: nexaSlabBlack;
}
.fontHelveticaNeue {
    font-family: "Helvetica Neue", sans-serif;
}
.container-xxl {
    padding: 0;
    overflow: hidden;
}
/*========================== HEADER ==========================*/
header {
    height: 56px;
    font-size: 16px;
    position: relative;
    background:url(../img/bg-menu.png) no-repeat center center / cover;
    z-index: 2;
}
header .navbar-brand {
    margin: 0 100px;
}
header .nav-item {
    margin: 5px 10px 0;
}
header .nav-link {
    color: #fff;
}
header .nav-link:hover,
header .nav-link:focus {
    color: #f5cc19;
}
header .navbar-toggler,
header .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}
.separate {
    margin-top: -20px;
    position: relative;
    z-index: 2;
}
/*========================== INTRO ==========================*/
#intro {
    color: #610B00;
    padding-top: 100px;
    margin-top: -20px;
    text-align: center;
    background: url(../img/bg-1.jpg) no-repeat center center / cover;
}
#intro .logo {
    position: relative;
    margin-bottom: -110px;
    z-index: 1;
}
#intro .logo img {
    width: 360px;
}
#intro .introText {
    display: inline-block;
    width: 600px;
    height: 345px;
    padding: 115px 40px 0;
    font-family: nexaSlabBold;
    background: url(../img/board.png) no-repeat center center / contain;
}
#intro .auw {
    background: #431c25;
    border: 10px solid #9a4307;
    border-radius: 20px;
    width: 600px;
    margin: -20px auto 0;
    position: relative;
    color: #fff;
    padding: 30px 90px 70px;
}
/*========================== LANDS ==========================*/
#lands {
    padding: 40px 0 170px;
    background: url(../img/bg-2.png) no-repeat center top / cover;
    position: relative;
    z-index: 1;
    margin-top: -50px;
}
#lands .auw {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}
#lands .list .item:nth-child(1) {
    margin-top: -150px;
}
#lands .list .item:nth-child(2) {
    margin-top: -130px;
}
#lands .list .item:nth-child(3) {
    margin-top: -100px;
}
#lands .list .item .title {
    font-size: 18px;
    margin-bottom: 15px;
}
#lands .list .item:nth-child(odd) .landsImg {
    text-align: right;
}
#lands .list .item:nth-child(1) .landsImg img {
    margin-right: -50px;
    width: 500px;
}
#lands .list .item:nth-child(2) .landsImg img {
    width: 600px;
    margin-left: -90px;
}
#lands .list .item:nth-child(3) .landsImg img {
    width: 460px;
}
#lands .list .item:nth-child(odd) .text {
    padding: 50px 0 0 150px;
}
#lands .list .item:nth-child(even) .text {
    padding: 50px 150px 0 0;
    text-align: right;
}
/*========================== CHARACTER ==========================*/
#character {
    position: relative;
    margin-top: -100px;
    padding: 180px 100px 0;
    background: url(../img/bg-3.jpg) no-repeat center top / cover;
}
#character .inner {
    position: relative;
    z-index: 2;
}
#character .abyss {
    background: #431c25;
    border: 12px solid #9a4307;
    border-radius: 20px;
    position: relative;
    width: 500px;
    padding: 40px 30px 30px;
    margin: 0 0 50px 50px;
}
#character .abyss img {
    width: 140px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
}
#character .charImg {
    width: 550px;
}
#character .charName {
    width: 360px;
    position: absolute;
    z-index: 3;
    left: 220px;
    bottom: -70px;
}
#character .charBoardImg {
    width: 580px;
    height: 307px;
    margin-left: -50px;
    color: #610B00;
    font-family: nexaSlabBold;
    padding: 45px 60px 0;
    position: relative;
    background: url(../img/board.png) no-repeat center center / contain;
}
#character .charBoardImg img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -35px;
    width: 140px;
}
/*========================== NFT CARD ==========================*/
#nftCard {
    padding: 100px 0 170px;
    background: url(../img/bg-4.jpg) no-repeat center top / cover;    
    margin-top: -20px;
    text-align: center;
}
#nftCard .info {
    max-width: 500px;
    margin: 0 auto;
}
#nftCard .list {
    padding: 90px 200px 0;
}
/*========================== GAMEPLAY ==========================*/
#gameplay {
    padding: 220px 50px 0;
    background: url(../img/bg-5.jpg) no-repeat center top / cover;
    margin-top: -20px;
    position: relative;
}
#gameplay .badgeImg {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    width: 270px;
    z-index: 2;
}
#gameplay .heroInfo {
    position: absolute;
    left: 40px;
    top: -10px;
    width: 200px;
    z-index: 2;
}
#gameplay .list {
    width: 650px;
    margin: 50px auto 0;
}
/*========================== HOW TO EARN ==========================*/
#howToEarn {
    position: relative;
    padding: 200px 250px;
    background: url(../img/bg-6.jpg) no-repeat center top / cover;
    margin-top: -20px;    
}
#howToEarn .badgeImg {
    position: absolute;
    width: 350px;    
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
#howToEarn .item {
    position: relative;
}
#howToEarn .item .text {
    color: #610B00;
    position: absolute;
    text-align: center;
    padding: 0 60px;
    top: 165px;
}
/*========================== ROADMAP ==========================*/
#roadmap {
    padding: 150px 0 50px;
    background: url(../img/bg-7.png) no-repeat center top / cover;
    margin-top: -160px;
    position: relative;
}
#roadmap .info {
    color: #610B00;
    margin: 0 auto;
    width: 700px;
    height: 646px;
    padding: 220px 100px 180px 260px;
    background: url(../img/roadmap.png) no-repeat center center / contain;
}
#roadmap .info .item {
    position: relative;    
    padding-left: 15px;
}
#roadmap .info .item + .item {
    margin-top: 20px;
}
#roadmap .info .item:before,
#roadmap .info .item:after {
    content: '';
    position: absolute;    
}
#roadmap .info .item:before {
    width: 5px;
    height: 5px;
    top: 5px;
    left: 0;
    background: #873800;
    border-radius: 50%;
}
#roadmap .info .item:after {
    width: 1px;
    height: calc(100% - 22px);
    background: #873800;
    top: 15px;
    left: 2px;
}
#roadmap .info .item .time {
    position: absolute;
    top: 0;
    right: calc(100% + 10px);
    white-space: nowrap;
}
/*========================== FOOTER ==========================*/

/*========================== RESPONSIVE ==========================*/
@media (max-width: 1180px) {
    #character .charBoardImg {
        margin-left: 0;
    }
    #character .charName {
        display: none;
    }
}
@media (max-width: 1024px) {
    header .navbar-brand {
        margin: 0 50px;
    }
    #lands .list .item:nth-child(odd) .text {
        padding: 50px 0 0 50px;
    }
    #lands .list .item:nth-child(even) .text {
        padding: 50px 50px 0 0;
    }
    #character {
        padding: 150px 0 0;
    }
    #character .abyss {
        margin-left: 0;
    }
    #character .charImg {
        width: 460px;
        display: block;
        margin: 0 auto;
    }
    #character .charBoardImg {
        width: 570px;
    }
    #nftCard .list {
        padding: 90px 60px 0;
    }
    #gameplay {
        padding-top: 150px;
    }
    #gameplay .badgeImg {
        width: 230px;
        top: -50px;
    }
    #gameplay .list {
        width: 550px;
    }
    #howToEarn {
        padding: 200px 100px;
    }
    #howToEarn .badgeImg {
        width: 300px;
    }
}
@media (max-width: 992px) {
    body {
        font-size: 13px;
    }
    header {
        font-size: 14px;
    }
    header .navbar-brand {
        margin: 0 10px;
        padding: 0;
    }
    header .nav-item {
        margin: 0;
    }
    #intro {
        padding-top: 70px;
    }
    #intro .logo img {
        width: 300px;
    }
    #lands .list .item:nth-child(1),
    #lands .list .item:nth-child(2),
    #lands .list .item:nth-child(3) {
        margin: 0;
    }
    #lands .list .item:nth-child(odd) .text,
    #lands .list .item:nth-child(even) .text {
        padding: 0 20px;
    }
    #lands .list .item:nth-child(1) .landsImg img,
    #lands .list .item:nth-child(2) .landsImg img,
    #lands .list .item:nth-child(3) .landsImg img {
        width: 100%;
        margin: 0;
    }
    #character .charImg {
        width: 400px;
    }
    #character .charBoardImg {
        margin: -20px 0 0;
    }
    #nftCard {
        padding: 70px 0 130px;
    }
    #nftCard .list {
        padding: 50px 20px 0;
    }
    #gameplay {
        padding: 100px 20px 0;
    }
    #gameplay .heroInfo {
        left: 20px;
        width: 120px;
    }
    #gameplay .badgeImg {
        width: 160px;
        top: -30px;
    }
    #howToEarn .badgeImg {
        width: 220px;
    }
    #howToEarn {
        padding: 150px 20px;
    }
    #howToEarn .item .text {
        padding: 0 50px;
        top: 145px;
    }
}
@media (max-width: 768px) {
    
}
@media (max-width: 576px) {
    body {
        font-size: 12px;
    }
    section:not(.separate) {
        padding: 0 10px;
    }
    header .navbar-collapse {
        background: #490a00;
    }
    #intro {
        padding-top: 30px;
    }
    #intro .logo {
        margin-bottom: -100px;
    }
    #intro .logo img {
        width: 160px;
    }
    #intro .introText {
        width: 100%;
        font-size: 10.5px;
        padding: 100px 20px 0;
    }
    #intro .auw {
        width: 100%;
        padding: 20px 30px 50px;
        margin-top: -80px;
    }
    #lands {
        margin-top: -40px;        
        padding-bottom: 100px;
    }
    #lands,
    #lands .list .item:nth-child(even) .text {
        text-align: center;
    }
    #lands .list .item:nth-child(1), 
    #lands .list .item:nth-child(2), 
    #lands .list .item:nth-child(3) {
        margin-top: 20px;
    }
    #lands .list .item .title {
        margin-top: 10px;
    }
    #character {
        margin-top: -80px;
        padding: 100px 10px 0;
    }
    #character .abyss {
        margin-left: 0;
        width: 100%;
        padding: 40px 20px 20px;
        margin-bottom: 20px;
    }
    #character .charBoardImg {
        background: #e9d89c;
        border: 5px solid #4a1d28;
        border-radius: 15px;
        width: 100%;
        height: auto;
        padding: 50px 15px 15px;
        margin: 0;
    }
    #nftCard {
        padding: 70px 10px 130px;
    }
    #nftCard .list .item {
        margin-bottom: 15px;
    }
    #gameplay {
        padding: 100px 10px 0;
    }
    #gameplay .heroInfo {
        left: 10px;
        top: 50px;
    }
    #gameplay .list {
        width: 100%;
    }
    #gameplay .list .item {
        margin-bottom: 15px;
    }
    #howToEarn {
        padding: 150px 0;
    }
    #howToEarn .item .text {
        padding: 0 40px;
        top: 115px;
    }
    #roadmap {
        padding: 100px 10px 50px;
    }
    #roadmap .info {
        background: #e9d89c;
        border: 5px solid #4a1d28;
        border-radius: 15px;
        width: 100%;
        height: auto;
        padding: 20px 15px 15px 90px;
    }
}