:root{
    /*SITE COLOURS: #042---c06 #0bee---3ccc*/ 
    /*SITE COLOURS: #f8---f8f8 #3331---31*/ 
    --site_color_main:#fdfff5;
    --site_color_alt:#333131;
}

body{
    background-color:var(--site_color_main); /*test-colour: var(--site_color_main);var(--site_color_alt)*/
    color:#000;   
    overflow-x:hidden; 
    animation:bugfix infinite 1s;
    font-family: "Trirong", Cambria, Cochin, Georgia, Times, serif;
    margin:0;
    padding:30px 12px;
    width:100%;
    font-size: 18px;
}

h1, h2, h3, h4, h5, h6{
    /*font-family: "Prompt";*/
    font-family: "RocknRoll One", sans-serif;
}

@keyframes bugfix{
    from{padding: 0;}
    to{padding:0;}
}

.white_background{
    background-color:var(--site_color_alt);
    color:#0e0d0d;
    padding:12px;
}

a{
    color:#ff9100;
    text-decoration:none;
}

.button{
    background-color:var(--site_color_main);
    font-weight:bold;
    color:var(--site_color_alt);
    font-size:18px;
    margin:19px 0px;
    border:0px;
    padding:8px 17px;
    border-radius:3px;
}

.menu-box{
    display:none;
}

.menu-icon{
    font-size:24px;
    float:right;
    color:var(--site_color_alt);
    border-radius:4px;
}

.headers{
    padding:6px 3px;
    top:0;
    left:0px;
    position:fixed;
    width:100%;
    height:49px;
    background-color:var(--site_color_main);
}

.headers a{
    color:var(--site_color_alt);
}

.headers:after, .headers:before{
    content:"";
    display:block;
    clear:both;
}

.x{
    font-size:21px; 
    color:var;
    text-align: right;
    margin-right:28px
}

.menu-list, .admin_menu_list{
    /*display:none;display:grid;*/ 
    /*right:-92%;*/
    background-color: var(--site_color_main);
    color:var(--site_color_alt);
    
    list-style-type:none !important;
    position:fixed;
    width:0px;
    height:0px;
    display:none;
} 

.menu-list li, .admin_menu_list li{
    font-size: 18px;
    padding:16px 16px 16px 0px;
    border-bottom:1px solid #525050 !important;/*#ffffff52*/
    list-style-type:none !important;
}

.menu-list li a{
    color:var(--site_color_alt);
}

.menu-list li a:hover,.admin_menu_list li a:hover{
    background-color: #525050;
    padding:3px 5px;
    border-radius:3px;
}

.menu-box:checked ~ .menu-list, .admin_menu_box:checked ~ .admin_menu_list{
    top:-16px;
    right:0px; 
    left:0;
    width: 100%; 
    height:fit-content;
    padding:6px 21px;
    box-shadow:0px 0px 9px 0px var(--site_color_alt); 
    transition-property:width;
    transition-delay: .1s;
    transition-duration:0.6s;
    transition-timing-function: ease-in;
    display:block;
    list-style-type: none;
}

.menu-box:checked ~ .menu_list li{
   /* border-top:1px solid #fff;*/
    padding-left:30px;
}

.admin-menu-box:checked ~ .admin_menu_list li{
    border-top:1px solid #888;
}

/*
.menu-box:checked ~ .fa-fa-bars {
    display:none;
}*/

.site_name{
    color:var(--site_color_alt);
    font-size:18px;
    float:left;
    background-color: var(--site_color_main);
}

.site_name_logo{
    width:45px;
    height:45px;
    margin:6px;
}

.rotate_360 {
    animation: rotate_360 6s infinite .0s normal;
}

.rotate_360_once {
    /*width:60px;
    height:60px;*/
    animation: rotate_360_once 6s 1 .0s normal;
}

@keyframes fade{
    from{background-color:var(--site_color_main);}
    to{background-color: var(--site_color_alt);}
}

@keyframes fade2{
    from{background-color:var(--site_color_main);color:var(--site_color_alt)}
    to{background-color: #fff;color:var(--site_color_main)}
}

@keyframes rotate {
    from{rotate:0deg;}
    to{rotate:30deg;}
}

@keyframes rotate_360{
    from{
        rotate:0deg;
        width:180px;
        height:180px;
    }
    to{
        rotate:360deg;
        width:210px;
        height:210px;
    }
}

@keyframes rotate_360_once{
    from{
        rotate:0deg;
        width:51px;
        height:51px;
    }
    to{
        rotate:360deg;
        width:54px;
        height:54px;
    }
}

.header_text{
    margin-top: 18px;
    color:var(--site_color_main);
    font-size: 30px;
    text-align:center;
}

.site_images_div{
    margin:12px 9px;
    text-align:center;
}

.site_images{
    width:75%; 
    height:auto;
    border-radius:9px;
}

.haystackpay_intro{
    text-align:center; 
    margin:96px 12px 24px 12px;
    /*background-image: url(../static/images/logo.png);*/
}

.index_textarea{
    width:93%;
    height:150px;
    border:2px solid #ccc;
    box-sizing:border-box;
    background-color:var(--site_color_main);
    border-radius:6px;
    font-size:15px;
    font-family:arial;
    padding:12px 16px;
    margin:15px;
}

.get_started{
    background-color: var(--site_color_alt);
    color:var(--site_color_main);
    border-radius: 9px;
    border:1px solid #ff9100;
    padding:12px;
    font-weight:bold;
    font-size:18px;
    margin:24px 6px;
    display: flex;
    justify-content: center;
}

.get_started i{
    margin-left: 6px;
}

.get_started_img_div{
    margin-right:9px;
}

.get_started_img{
    width:30px;
    height:30px;
    border-radius: 100%;
    border: 1px solid var(--site_color_main);
}

.bt_input_div{
    padding:6px 9px; 
    border:2px solid #888;
    border-radius:6px;
    margin:9px 3px
}

.faq .header_text{
    color:var(--site_color_alt);
}

.login, .sign-up{
    float:left;
    margin-left:12px;
    font-weight:bold;
}

.login a, .sign-up a{
    color:var(--site_color_alt) !important;
}

.action_button {
    padding:6px;
    background-color: var(--site_color_alt);
    border-radius: 8px;
    width:fit-content;
    color:var(--site_color_main);
    border:0;
}

.long-action-button{
    padding:15px 6px;
    background-color: var(--site_color_alt);
    border-radius:6px;
    width:fit-content;
    color:var(--site_color_main);
    border:0;
    width:90%;
    max-width:600px;
    font-size:18px;
    font-weight: bold;
}

.new-dashboard {
    padding:16px 8px;
    border-top:1px solid #888;
    margin:12px;
    position:relative;
    height:fit-content;
}

.new-dashboard-left{
    left:0;
    position:absolute;
    font-weight:bold;
}

.new-dashboard-right{
    position:absolute;
    right:0;
}

.new-dashboard-head{
    background-color: var(--site_color_main);
    color:var(--site_color_alt);
    padding:6px;
}

.new-dashboard-subhead{
    background-color: #ff9100;
    padding:7px;
    border-radius:6px;
    width:93%;
    margin:8px 6px;
}

.where_to_get_wallet_address{
   border-radius:12px;
   border:3px solid var(--site_color_alt);
   background-color: #000500;
   box-shadow: 0 0 3px 0 var(--site_color_alt);
   padding:12px 9px;
   width:87%;
   height:90%;
   position:fixed;
   top:3%;
   right:3%;
   z-index:12;
   overflow: scroll;
   font-size:15px;
}

.where_to_get_wa_header{
    font-weight:bold;
    font-size:18px;
    margin-top:15px;
}

.where_to_get_wa_subheader{
    font-weight:bold;
}

.where_to_get_wa_subheader, .where_to_get_wa_text{
    margin:9px 12px;
}

.where_to_get_wa_card{
    border-radius: 6px;
    border:1px solid var(--site_color_alt);
    margin-bottom:18px;
}

.where_to_get_wa_img{
    width:100%;
    border-radius:6px;
}

.close_where_to_get_wa, .close_bt_input_div{
    font-size:27px;
    text-align: center;
    font-weight:bold;
    color:#fff;
    background-color: red;
    height:36px;
    width:36px;
    border-radius:100%;
}

.close_where_to_get_wa {
    top:6%;
    right:8%;
    position:fixed;   
}

.close_bt_input_div{
    position:relative;
    float: right;
}

.close_where_to_get_wa .fa-x-icon, .close_bt_input_div .fa-x-icon{
    margin-top:-5px;
}

.pop_up{
    text-align:center;
    position:fixed;
    width:75%;
    top:40%;
    left:8%;
    right:8%;
    background-color:var(--site_color_alt);
    color:var(--site_color_main);
    box-shadow:0px 0px 3px #fff;
    border:solid var(--site_color_main);
    border-radius:6px;
    padding:24px;
    animation:pop_up .2s 1 2s reverse;
    z-index:3;
}

.dashboard_top_section {
    margin:0;
}

.dashboard_top_div {
    color:#ff9100;
    background-color:#ffdaa9;
    border-radius:9px;
    margin:18px;
    width:75px;
    height:60px;
    padding-top:15px;
    font-size:42px;
    text-align:center;
}

.dashboard_top_text{
    font-size:15px;
    text-align:center;
}

.dashboard_form{
    background-color:#fff;
    padding:12px;
    border-radius:9px;
    border:1px solid #ff9100;
}

.dashboard_input {
    border:1px solid #888;
    margin:9px 3px;
    height:42px;
    width:96%;
    padding:6px;
    border-radius:9px;
    box-shadow:0 0 3px 0 #ff9100 inset;
    font-size:16px;
}

@keyframes pop_up{
    0%{
        opacity:1;
    }
    25%{
        opacity:0.8;
    }
    50%{
        opacity: 0.6;
    }
    75%{
        opacity: 0;
        display:none;
    }
    100%{
        opacity:0;
        display:none;
    }
}

.admin_user_details{
    margin-bottom:12px;
    border-bottom:1px dotted #888;
    padding-bottom:6px;
}

.about_us{
   background-color:var(--site_color_main);
   color: #fff;
   padding:5% 3%;    
}

.youtube-video{
    padding:3% 4%;
    border-radius: 6px;
    background-color: #525050;
    max-width:600px;
    max-height:400px;
    margin-top:16px;
}

.certificate_div {
    padding:70px 10px;
    text-align:center;
}

.certificate_button{
    padding: 16px;
    background-color: var(--site_color_alt);
    letter-spacing: 2px;
    font-size:11px;
    color:var(--site_color_alt);
}

.certificate_img{
    width:95%;
    height:100%;
    max-width:600px;
    max-height:800px;
    margin: 3px 4px;
}

.clients-new-parent{
    display: flex;
    color:#000;
    background-color:var(--site_color_alt);
    overflow-x:visible;
    width:2700px;
}

.clients{
    width:94%;
    margin:3%;
    padding:18px;
    height:fit-content;
}

.clients-new{
    width:60%;
    max-width:300px;
    margin:3% 16px;
    height:fit-content;
    border-radius: 8px;
    box-shadow:0 0 7px 0 #ff9100;
    color:#000;
    background-color:var(--site_color_alt)
}

.clients_text_top {
    font-size: 32px;
}

.clients_text-new{
    padding:6px;
}

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

.clients_text_bottom {
    margin-top:15px;
    line-height: 30px;
}

.clients_text_bottom-new {
    margin-top:15px;
    font-size:12px;
}

.clients_img{
    width:90%;
    height:50%;
    max-width:600px;
    margin: 0 4%;
    border-radius:6px;
}

.clients_img-new{
    width:100%;
    height:40%;
    max-width:600px;
    border-radius:6px 6px 0 0;
}

.three-steps-div{
    width:90%;
    height:50%;
    max-width:600px;
    margin: 0 4%;
}

.steps-img{
    float:left;
    background-color: #525050;
    border-radius: 100%;
    padding:21px;
}

.illustration-font{
    float:left;
    font-size: 48px;
    color:#ccc8c8;
    margin-top: 16px;
}

.steps-img img{
    width:42px;
    height:42px;
}

.steps-text{
    float:left;
    margin-left:18px;
    overflow-wrap: break-word;
}

.illustration-text{
    width:70%;
    float:left;
    margin-left:18px;
    overflow-wrap: break-word;
}

.inner-counter{
    text-align:center;
}

.footer{
    text-align: center;
}

.footer_fa_links, .footer_copyright{
    padding:30px 6px;
}

.footer_fa_links{
    border-bottom: 1px dotted var(--site_color_alt);
    letter-spacing: 12px;
    font-size: 21px;
}

.search-input{
    border-radius:6px;
    height:24px;
    border:0px;
    width:60%;
}

.search-button {
    border-radius: 0px 6px 6px 0px;
    background-color:#f00;
    color:var(--site_color_alt);
    margin-left:-69px;
    height:26px;
    border:0px;
}

.input {
    width:90%;
    height:33px;
    margin-top:6px;
    background-color:#fff;
    font-size:18px;
    color:var(--site_color_alt);
    border:1px solid var(--site_color_alt);
    border-radius: 6px;
}

.new-input-div{
    position:relative;
}

.new-input-fa-icon{
    position:absolute;
    height:21px;
    top:12px;
    left:12px;
    padding:3px 12px 3px 6px;
    border-right:2px solid #bbb7b7;
    color:var(--site_color_alt);
}

.new-input {
    width:96%;
    height:37px;
    margin-top:6px;
    background-color: #fff;
    color:var(--site_color_alt);
    font-weight:bold;
    font-size:18px;
    border:1px solid #525050;
    border-radius: 6px;
    border-left:54px solid #fff;
}

.textarea{
    margin:6px 0px 3px 0px;
    width:90%;
    height:100px;
    background-color:#03010f;
    color:var(--site_color_alt);
    border:1px solid #fff;
    border-radius: 6px;
}

/*other pages*//**/
.sign-in-page{
    background-color:var(--site_color_alt);
    color:var(--site_color_main);
    margin:105px 15px;
    padding:12px 8px;
    border-radius:8px;
    box-shadow:0 0 9px 0 #ff9100;
    height:fit-content;
}

.sign-in-bottom{
    margin-top:21px;
}

.sign-in-bottom div a{
    color:#ff9100;
}

.fa-user-login {
    margin-right:18px;
    font-size:30px;
    background-color: var(--site_color_alt);
    width:45px; 
    height:39px;
    padding-top:6px;
    border-radius:100%;
    text-align: center;
}

.new-sign-in-head{
    font-weight:bold;
    font-family:"Prompt";
    margin:21px 9px;
    display: flex;
}

.new-sign-in-head-caption{
    font-size:21px;
    color:var(--site_color_alt);
    margin-top:9px;
    font-weight:bold;
}

.sign-in-page .fa-user-login {
    background-color:var(--site_color_main);
}

.sign-in-page .new-sign-in-head-caption{
    color:var(--site_color_main);
}

.sign-in-page .fa-user {
    color:var(--site_color_alt);
}

.sign-in-box{
    padding:5px;
}

.sign-in-box-headers {
    margin: 12px 0 -3px 0;
    font-size:15px;
    font-weight:bold;
}

.sign-in-box a{
    color:var(--site_color_main);
    font-weight:bold;
}

.airdrop_requirements{
    margin-top:12px;
    background-color:#111111;
    padding:9px;
    border-radius:6px;
    box-shadow: 0 0 3px 0 var(--site_color_alt);
}

.code1, .code2, .code3, .code4, .code5, .code0{
    flex:3 3 auto;
    font-weight:bold;
    font-size:21px;
    margin:0px 8px 0px 8px;
}

.code1, .code0{
    transform:rotate(45deg);
}

.code2, .code3{
    transform:rotate(-45deg);
}

.code4, .code5{
    transform:rotate(60deg);
}

.main{
    margin:12px 1% ;
    padding:12px;
    box-shadow: 0px 0px 9px 1px var(--site_color_main);
    border-radius:6px;
    overflow:hidden;
}

.invalid {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:24px;padding:8px;
    background-color:pink;
    /*animation:blink 6s infinite .2s alternate;*/
    font-size:15px;
    font-weight:bold;
    z-index:15;
}

.investor_input, .investor_input2{
    height:24px;
    border:1px solid var(--site_color_alt);
    border-right:49px solid var(--site_color_alt);
    width:70%;
    border-radius:4px;
    margin-top:12px;
}

.investor_input2{
    border-right:71px solid var(--site_color_alt) !important;
}

.calculator{
    border-radius:6px;
    box-shadow:0px 0px 9px 0px var(--site_color_alt);
    padding:5px 0px 16px 8px;
    margin:6% 3%;
}

/*about page(s)*/

.about{
    margin-top:81px;
}

/*End of about page(s)*/

/*Dashboard:*/

.dashboard_div{
    margin:150px 3% 9% 3%;
    padding: 6px 12px;
    border:1px solid #525050;
    border-radius:6px;
    background-color:var(--site_color_alt) ;
    color:var(--site_color_main);
    box-shadow:0 0 9px 0 #525050;
}

.dashboard_div a{
    color:#ff9100;
}

.dashboard_div:hover, .dashboard_div:active{
    box-shadow:0 0 9px 0 var(--site_color_alt);
}

.dashboard_lower_div{
    margin:24px 4px 10% 4px;
    background-color:#03010f;
    border:1px solid #fff;
    border-radius:6px;
}

.wallet{
    padding:12px;
    margin-top:17px;
    border-bottom:1px solid #525050;
}

.wallet_left{
    float:left;  
    width:75%;
    margin-right:2%;
    font-size:17px;
    line-height:30px;
}

.wallet_left_top{
    font-weight:bold;
    font-size:24px;
}


.wallet_right{
    float:right;
    text-align:center;
   /*vertical-align:center;*/
    padding:12px 10px 8px 10px;
    font-size:24px;
    width:35px;
    height:35px;
    color:var(--site_color_alt);
    background-color:var(--site_color_alt);
    border-radius:100%;
}

.hidden-menu-div{
    display:none;
    background-color:var(--site_color_alt); 
    border-radius:6px;
    padding:6px;
    line-height:25px;
    margin:0 8px 2px -10px;
    width:90%;
    margin-right:12px;
}

.hidden-menu-div a{
    border-bottom:1px dotted #fff;
    color:var(--site_color_alt);
}

.hidden-menu-item:checked ~ .hidden-menu-div{
    display:block;
}

.invest_now_button{
    padding:6px 12px;
    color:var(--site_color_alt);
    border-radius:6px;
    background-color:var(--site_color_alt);
    font-size:17px;
    border:none;
}

.message_success{
    background-color:var(--site_color_alt);
    color:var(--site_color_alt);
    border-radius:3px;
    padding:4px;
    margin:8px 8px;
    display:block;
    position:fixed;
    top:40%;
    width:80%;
    box-shadow:0px 0px 9px 0px #fff
}

.blink{
    animation:blink 3s infinite .3s alternate;
}

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

.menu_and_user_icon{
    float:right;
}

.hi_user {
    position:fixed;
    width:100%;
    height:39px;
    top:59px;
    left:0;
    background-color:var(--site_color_alt);
    padding:9px 6px;
    box-shadow:0 0 3px 0 var(--site_color_alt);
}

/*Dashboard ends*/

/*End of other pages*/

/*Miscellaneous*/

.big_texts, .big_letters{
    font-size:22px;
    margin-top:-20px;
}

.small_letters{
    font-size:14px;
}

.clear:before,.clear:after,.hi_user::after,.hi_user:before,.new-dashboard::before,.new-dashboard::after,.three-steps-div::after,.three-steps-div::after,.wallet:after, .invalid:before, .invalid:after, .invest_now_div_parent:after, .invest_now_div_parent:before{
    content:"";
    display:block;
    clear:both;
}
/*End of Miscellaneous*/

/*For small screens*/
/*special stylings for a few cases*/
@media screen and (max-width:48em) {
    .video {
        height:400px;
    }
}
/**/
.headers{
    z-index: 9;
}

.menu-list{
    z-index: 10;
}

.hi_user {
    z-index: 7;
}

/*End of 'small screens'*/



/*For Big Screens:*/
@media screen and (min-width:48em) {
    .menu-icon, .menu_and_user_icon{
       display:none;
    }
    
    .menu-list, .menu-box:checked ~ .menu-list{   
        border:0px;
        box-shadow: none;
        display:flex;
        width:100%;
        height:58px;
        left:180px;
        top:-15px;
        color:var(--site_color_alt);
        background-color: none !important;
        list-style-type:none !important;
        float:left;
        z-index: 2;
        /*position:absolute;*/
    }

    .menu-list:after{
        content: "";
        display: block;
        clear: both;
    }

    .menu-list li{
        border-bottom: 0px;
    }

    .x{
        display: none;
    }

    .headers{
        width:21%;
        max-width:190px;
    }

    .white_background{
        padding:21px;
        width:100%;
    }

    .flex-div{
        display:flex;
        justify-content: space-around;
    }

    .action_button{
        padding: 12px 24px;
        background-color: var(--site_color_alt);
        margin:0 3%;
        border-radius: 8px;
    }

    /*Other Pages(Big Screen)*/
    .sign-in-box{
        padding:10%;
    }

    .sign-in-bottom{
        margin-left:2%;
    }

    .input{
        margin-left:18px
    }

    .main{
        margin:10% 21% 2% 21%;
    }

    .dashboard_div{
        margin:14% 14% 6% 14%;
    }

    .dashboard_lower_div{
        margin:6% 14%;
    }

    .site_images{
        width:300px;
        height:auto;
    }

    .where_to_get_wallet_address{
        width:45%;
        right:25%;
    }

    .close_where_to_get_wa{
        right:28%;
    }

    /*End of Other Pages(Big Screen)*/
}

/*End of stylings for big screens*/