@font-face {
            font-family: Averta-Light;
            src: url('../css/fonts/AVERTA/AvertaStd-Light.ttf');
        }

        @font-face {
            font-family: Averta-Bold;
            src: url('../css/fonts/AVERTA/AvertaStd-Bold.ttf');
        }

        @font-face {
            font-family: Monument-Bold;
            src: url('../css/fonts/MONUMENT/MonumentExtended-Bold.ttf');
        }

        @font-face {
            font-family: Monument-Med;
            src: url('../css/fonts/MONUMENT/MonumentExtended-Medium.ttf');
        }

        @font-face {
            font-family: Monument-Book;
            src: url('../css/fonts/MONUMENT/MonumentExtended-Book.ttf');
        }

        @font-face {
            font-family: Monument-Black;
            src: url('../css/fonts/MONUMENT/MonumentExtended-Black.ttf');
        }


body {
    overflow-x: hidden;
}
        a:hover{
            color: #39f7cc;
            }

            footer .nav .nav-item .nav-link:hover {
                color: #39f7cc;
            }

            .fixed-nav {
                position: fixed;
                width: 100%;
                z-index: 9999;
            }
        .home .container {
            min-height: 640px;
        }

        h1, h2, h3 {
            font-family: 'Monument-Bold', Arial, Helvetica, sans-serif;
            text-transform: uppercase;
        }

        h2 {
            font-family: 'Monument-Med', Arial, Helvetica, sans-serif;
            text-transform: uppercase;
        }
        h4, h6 {
            color: #39f7cc;
            font-family: 'Averta-Bold', Arial, Helvetica, sans-serif;
        }

        h5 {
            font-family: 'Monument-Bold', Arial, Helvetica, sans-serif;
            color: #12141c;
        }

        body {
            margin: 0;
            padding: 0;
            background: #12141c;
            font-family: 'Averta-Light', Arial, Helvetica, sans-serif;
            color: #fff;

        }

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

            .container-hidden {
                    display: none;
            }


.font-30 {
    font-size: 30px;
}

.font-40 {
    font-size: 40px;
}


.font-18 {
    font-size:18px;
}

.font-26 {
    font-size:26px;
}


.bold-font {
               font-family: 'Monument-Bold', Arial, Helvetica, sans-serif;
}

.med-font {
               font-family: 'Monument-Med', Arial, Helvetica, sans-serif;
}

.black-font {
               font-family: 'Monument-Black', Arial, Helvetica, sans-serif;
}

.margin-bottom-0 {
    margin-bottom: 0px;
}

.spacing-for-text {
    margin-top: 30px;
}

.text-margin {
   position: relative;
    left: -9px;
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.text-uppercase {
    text-transform: uppercase;
}

        .home, .home-2 {
           background-color:#12141c;


        }

        .home-2 {
            background: #12141c url(../img/home-bg.png) 0px 0px no-repeat;
            background-size: cover;
            z-index: 3;
            position: relative;

        }

        .home .content {
            /*background: url(../img/home-bg.png) 0px 0px no-repeat;
            background-size: cover;
*/
            padding-top: 50px;
            background: url(../img/home-bg.png) 10px 110px no-repeat;
            background-size: 100%;

        }

    .home .content-02 {
            /*background: url(../img/home-bg.png) 0px 0px no-repeat;
            background-size: cover;
*/
            padding-top: 50px;
            background: url(../img/home-bg.png) 10px 110px no-repeat;
            background-size: 100%;



        }


       .home .content-00 {
            background: url(../img/background-genesis-web.png) no-repeat !important;
            background-size: cover !important;




        }

  .home .content-01 {
            background: url(../img/background-tinman.png) no-repeat !important;
            background-size: cover !important;




        }

.btn-blackandwhite {
    display: inline-block;
    border: 1px solid #fff;
    padding: 15px 65px;
    text-decoration: none;
    color: #fff;
    background: #000;
    font-family: 'Monument-Book', Arial, Helvetica, sans-serif;
}

.btn-blackandwhite:hover {
    color: #000;
    background: #fff;
    border: 1px solid #000;
}

.home .content .container {
    /*
    min-height: 520px;
    */
}

.home .content .container .row, .content .nft-data-page .row {
    margin-top:40px;
}

.home .content  .image-title, .content .nft-data-page  .image-title{
    width: 55%;
    margin-top: 5%;
    margin-left: -9px;
}

.home .content .tin-man  .title-text, .content .nft-data-page .title-text{
    width: 100%;
    margin-top: 5%;


}





.home .content .text-for-content, .content .nft-data-page .text-for-content{
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 40px;
}

.drop-shadow-for-card .img-wrapper {
box-shadow: 0px 3px 18px 2px rgba(9,10,10,0.65);
}

.genesis-flash-top {
   position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 50%;
    z-index: 1;


}

.genesis-flash-bottom {
       position: absolute;
    bottom: 0px;
    right: 0px;
    display: inline-block;
    width: 50%;
     z-index: 1;


}

.tin-man .genesis-flash-top {
   position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 100%;
    z-index: 1;


}

.tin-man .genesis-flash-bottom {
       position: absolute;
    bottom: 0px;
    right: 0px;
    display: inline-block;
    width: 100%;
     z-index: 1;


}


.onyx-section .text-aream {
    margin-top: 50px;
}

.nft-card-in-case {
    width: 55%;
   padding: 5% 0 5% 0;
    z-index: 2;
    float:right;
    margin-right: 30px;

}

.dots-for-slideshow {
    position: relative;
    top: -20px;
    text-align: center;
}

.margin-blockchain {
    margin-top: 32px;
}

     @media screen and (max-width: 1400px) {

.home .content .container {

    min-height: 520px;

}
}

        @media screen and (max-width: 1200px) {

            .home .content .container {

    min-height: 540px;

}

            .nft-card-in-case {
            width: 70%;
            }

}

  @media screen and (max-width: 1000px) {
.home .content .container {
    min-height: 460px;
}
}

  @media screen and (max-width: 992px) {
.btn-blackandwhite {

    padding: 15px 50px;
    font-size: 14px;
}
}

  @media screen and (max-width: 800px) {

    .onyx-section .text-aream {
        margin-top: 0px;
    }


    .margin-blockchain {
        margin-top: 0px;
    }

      .font-30 {
    font-size: 22px;
}

.font-40 {
    font-size: 30px;
}


.font-18 {
    font-size:14px;
}

.font-26 {
    font-size:16px;
}

      .spacing-for-text li {
          font-size:13px;
      }

      .text-margin{
                left: 0px;
      }

.nft-card-in-case {
    width: 85%;
    float: none;
    margin: 0 auto;
}



       .genesis-flash-top{
        width: 70% !important;


          }
      .genesis-flash-bottom {
        width: 70% !important;

      }

      .tin-man .genesis-flash-top {
    top: 40px;
    width: 100% !important;
    display: none;



}

.tin-man .genesis-flash-bottom {
    display: none;
    width: 100% !important;



}

.tin-man .genesis-flash-top-mobile {
    top: 40px;
    width: 100% !important;
    position: absolute;
    left: 0px;
    
}

.tin-man .genesis-flash-bottom-mobile {
    position: absolute;
    width: 100% !important;
    bottom: 0px;
    left: 0px;




}

      .home .content .text-for-content{

    margin-bottom: 60px;
}
    }

  @media screen and (max-width: 600px) {
       .genesis-flash-top{
        width: 90% !important;

          }
      .genesis-flash-bottom {
        width: 90% !important;

          }
    }


        .whoweare {
            background: url(../img/bg2.png) -50px -220px no-repeat;
            background-size: 120%;
            padding: 35px 0 35px 0;
        }

        .download-app {
            background: url(../img/bg2.png) 10px -120px no-repeat;
            background-size: 100%;
            padding: 35px 0 35px 0;

            position: relative;
        }

        footer{
            background: #12141c;
            min-height: 500px;
            padding: 35px 0 35px 0;
            position: relative;
        }

        .services {
            background: rgb(2, 0, 36);
            background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);
            color: #12141c;
            padding: 35px 0 35px 0;
        }

        .contact {
            background: rgb(2, 0, 36);
            background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);
            color: #12141c;
            padding: 35px 0 35px 0;
            text-transform: uppercase;
        }

        .logo {
            width: 100%;
            text-align: center;
        }

        .logo img {
            width: 126px;
            position: relative;
            top: 5px;
        }

        .logo span {
            text-indent: -9999px;
            display: inline-block;
        }

        .navbar-dark .navbar-toggler-icon {
            background-image: url('../img/burger-menu.png');
        }

        .navbar-dark .navbar-toggler {
            color: transparent;
            border-color: transparent;
        }

        .bg-dark {
            background-color: #12141c !important;
        }

        .menu-txt {
            display: inline-block;
            color: white;
            font-size: 10px;
            padding-left: 4px;
            font-weight: normal;
            letter-spacing: 1.5px;
            position: relative;
            top: -1px;
        }

        .nav-position {
            position: relative;
            top: -30px;
        }

        .fixed-nav .nav-link {
            color: white;
            padding-left: 15px;
            text-transform: uppercase;
            font-size: 10px;
            font-family: 'Monument-Book', Arial, Helvetica, sans-serif;
        }

        .home-2 .card-fade {

        }

        @keyframes fadeIn {
            0% {opacity:0; }
            50% {opacity:0; }
            100% {opacity:1; }
          }

        .fixed-nav .nav-link:hover {
            color: #12141c !important;
            background: linear-gradient(
                    90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);

        }

        .text-area {
            margin-top: 66px;
            margin-bottom: 40px;
        }

        .bg-bubbles {
            z-index: 1;
            position: absolute;
            top: -30%;
            left: -10%;
            width: 57%;
            overflow: hidden;
        }

        .margin-bottom-0 {
            margin-bottom: 0px;
        }

        .line-border {
            border-top: 1px solid #fff;
            width: 20px;
            height: 1px;
            margin: 20px 0 20px 0;
        }

        .img-pack {
            width: 85%;
    padding: 5%;

    position: relative;
    float: right;
        }
        .home .container .row {
            z-index: 2;
            position: relative;
        }

        .headline {
            font-size: 24px;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            line-height: 30px;
            padding-bottom: 20px;
        }

        .headline2 {
            font-size: 24px;
         

            line-height: 30px;
            margin-bottom: 20px;

        }
        nav {
            z-index: 2;
        }

        .btn-menu {
            height: 10px;
        }

        .btn-dynsty {
            background: linear-gradient(
                    90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);
            color: #12141c;
            font-family: 'Monument-Med', Arial, Helvetica, sans-serif;
            text-transform: uppercase;
            font-size: 10px;

    font-weight: normal;
    letter-spacing: 1.5px;
    position: relative;

        }

        .btn-dynsty:hover {
            background: white;
            color: rgba(56, 248, 212, 1);
        }

        .btn-dynsty-2 {
            background: #12141c;
            color: rgba(56, 248, 212, 1);
            font-family: 'Monument-Med', Arial, Helvetica, sans-serif;
            text-transform: uppercase;


    font-weight: normal;
    letter-spacing: 1.5px;
        }

        .btn-dynsty-2:hover {
            background: white;
            color: rgba(56, 248, 212, 1);

        }

        .btn-dynsty-3 {
            background: linear-gradient(
                90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);
        color: #12141c;
        font-family: 'Monument-Med', Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        letter-spacing: 1.5px;

  font-size: 12px;
    font-weight: normal;
            padding: 10px 100px;
        }



        .btn-dynsty-3:hover {
            background: white;
            color: rgba(56, 248, 212, 1);

        }

        .btn-dynsty-4 {
            background: linear-gradient(
                90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);
        color: #12141c;
        font-family: 'Monument-Med', Arial, Helvetica, sans-serif;
        text-transform: uppercase;
    font-size: 12px;

font-weight: normal;
letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 10px 60px;
        }

        .btn-dynsty-4:hover {
            background: white;
            color: rgba(56, 248, 212, 1);

        }


        /*.home video {
            position: absolute;
            z-index: 1;
            width: 100%;
           max-height: 930px;
            background: #12141c;
        }

        */

        .white {
            color: white;
        }

.green {
    color: #39f7cc;
}
        .home-2-text {
            padding-top:80px;
        }

        .slider-cards {
            width: 100%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .content {
                z-index: 2;
                position: relative;
        }

        .margin-bottom-80 {
            margin-top: 20px;
            margin-bottom: 80px;

        }

        .margin-bottom-20 {
            margin-top: 20px;
            margin-bottom: 35px;

        }

        .border-grad {
            height: 4px;
            background: linear-gradient(
                    90deg, rgba(2, 0, 36, 1) 0%, rgba(67, 234, 128, 1) 0%, rgba(56, 248, 212, 1) 100%);
            width: 100%;

            position: relative;
            z-index: 2;
        }

        .blockchain-img {
margin: 0 auto;
            width: 80%;

        }

        .card {
            min-height: 280px;
        }

        .client-text {

            font-size: 25px;
            font-weight: bold;
            padding: 15px 0 15px 0;
        }


.margin-left-15 {
    margin-left: 15px;
}

  .width-50 {
      width: 50% !important;
  }

  footer .nav .nav-item .nav-link {
      color: white;
      font-family: Averta-Bold;
  }

  .social-icons li a  {
      font-size: 20px;
  }

  .contact h5 {
      margin-bottom: 30px;
  }

  .whoweare {
      padding-top: 120px;
      padding-bottom: 80px;
      }

  .services .card {
      background-color: transparent;
    border: 0;
  }

  .services .card .card-img {
    width: 55%;
    text-align: center;
    margin: 0 auto;
}

.services .card .card-title {
    white-space: nowrap;
    text-align: center;
    font-size: 16px;
    padding: 20px 0 5px 0;
}

.services .card .card-text {
    text-align: center;
}

.app-img-60 {
    width: 60%;
    margin: 0 auto;
}

.app-img-50 {
    width: 50%;
    margin: 0 auto;
}

.app-img-75 {
    width: 75%;
    margin: 0 auto;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.clear {
    clear: both;
}

.left-arrow, .right-arrow,.img-app {


    position: relative;
    display: table-cell;

}

.left-arrow .fa-caret-left, .right-arrow .fa-caret-right {
    font-size: 40px;
    color: #3df1ab;
}

.left-arrow .fa-caret-left:hover, .right-arrow .fa-caret-right:hover {

    color:white;
}

.app-table {
    display: table-row;
}
.img-app {
   width: 60%;
}

.left-arrow {
    position: relative;
    left: 8%;
}

.right-arrow {
    position: relative;
    right: 8%;
}

.services, .download-app, .contact {
    padding: 80px 0 80px 0;
}

.font-14 {
    font-size: 14px;
}


.s-card {
 
    position: relative;
    z-index: 2;
    

}

.s-card-left {
    position: absolute;
    z-index: 1;
    top: 8%;
    left: -10%;
    width: 85%;
    

}

.s-card-right {
    position: absolute;
    z-index: 1;
    top: 8%;
    left: 25%;
    width: 85%;

}


@media screen and (max-width: 1200px) {


    .home .content {
        /*background: url(../img/home-bg.png) 0px 0px no-repeat;
        background-size: cover;
*/
background: url(../img/home-bg.png) -130px 280px no-repeat;
    background-size: 116%;

    }



    .btn-dynsty-3-mod {
        font-size: 9px;
font-weight: normal;
padding: 10px 60px;
    }


.img-pack {
    width: 100%;
}
.bg-bubbles {
    z-index: 1;
position: absolute;
top: -30%;
left: -10%;
width: 62%;
overflow: hidden;
}
}


        @media screen and (max-width: 960px) {
            .card {
                min-height: auto;
            }

            .app-img-60 {
                width: auto;
            }
            .c-apple .nav-link  {
                width: 60%;

                float: right;
            }

            .c-google .nav-link  {
                width: 60%;

                float: left;
            }

            .img-app {
                width: auto;
            }

            .left-arrow {
                position: relative;
                left: auto;
            }

            .right-arrow {
                position: relative;
                right: auto;
            }

        }



        @media screen and (max-width: 700px) {
            .logo {
                margin-left: 40px;
            }



        }



        @media screen and (max-width: 767px) {

            .desktop {
                display: none;
            }
            
            .mobile {
                display: block;
            }

            .line-border {
                border-top: 0px solid #fff;
                width: 20px;
                height: 1px;
                margin: 20px 0 20px 0;
            }


            .home .content-01 {
                background: url(../img/background-tinman.png) no-repeat -920px 0px !important;
                background-size: cover !important;
            }

            
            .home .content {
                background: url(../img/home-bg.png) -130px 280px no-repeat;
                background-size: 410%;
                        }
                    .genesis-flash-middle {
                        position: absolute;
                        top: 20px;
                        left: 0px;
                    }

                    .nft-card-in-case {
                        width: 75%;
                        float: none;
                        margin: 0 auto;
                       
                    }

            .home .content {
                background: url(../img/home-bg.png) -130px 280px no-repeat;
                background-size: 336%;

            }

           .home .content .content-area-center {
                text-align: center;
            }
            .home .content  .content-area-center .image-title {
               margin: 0 auto;
            }

        .c-apple .nav-link  {
            width: 50%;

            float: right;
        }

        .c-google .nav-link  {
            width: 50%;

            float: left;
        }

        .left-arrow .fa-caret-left, .right-arrow .fa-caret-right {
            font-size: 20px;

        }

        .bg-bubbles {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;

        }
    }


    @media screen and (max-width: 574px) {


        .c-apple .nav-link  {
            width: auto;

            float: none;
        }

        .c-google .nav-link  {
            width: auto;

            float: none;
        }

        .img-app {
            width: 60%;
         }

         .left-arrow {
             position: relative;
             left: 8%;
         }

         .right-arrow {
             position: relative;
             right: 8%;
         }
    }

/* inter page */



.content .nft-data-page  {
        min-height: 640px;
}

        .inter .content {
            /*background: url(../img/home-bg.png) 0px 0px no-repeat;
            background-size: cover;
*/
padding-top: 50px;
            background: url(../img/inter-bg.png) 10px 110px no-repeat;
            background-size: 100%;

        }




.book {

            font-family: 'Monument-Book', Arial, Helvetica, sans-serif;
            text-transform: uppercase;

}

.card-container, .front, .back {

}
.card-container {

}
.front, .back {
    box-sizing: border-box;

    border-radius: 4px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25);


}


.card-container {
    position: relative;
}
.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    overflow: hidden;
       transition: transform .8s ease;




}

.flip-front, .flip-back {
      transition: transform .8s ease;
}

.front {

}

.back {

    transform: rotateY(180deg);
}

.flip-front {
    z-index:2;
    transform: rotateY(-180deg);
}
.flip-back {
    z-index: 10;
    transform: rotateY(0deg);
}

.opacity-front {
      transition: opacity .8s ease;
    opacity: 0;
}

.opacity-back {
      transition: opacity .8s ease;
    opacity: 0;
}
.z-index-100 {
    z-index: 100 !important;
}

.card-container {
    perspective: 75rem;
}

footer {
    z-index: 100;
}

.inter .img-pack {
    height: 600px;
}