@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
 body {
     background-image: url("../images/bg_mesh.jpg");
     background-attachment: fixed;
     max-width: 900px;
     margin: 0 auto
 }
.roadmap_info{
    color: rgb(207, 241, 255);
    max-width: 90%;
    margin: auto;
}
 .roadmap_blueprint{
    background-image: url("../images/blueprint_pattern.jpg") ;
    background-size: 20px;
    min-height: 100px;
    padding: 10px;
    border-radius: 20px;
    display: grid;
    /* row-gap: 16px; */
 }
 .road_map_lineup{
    display: flex;
    justify-content: space-between;
    color: white;
    padding: 10px;
    background-color: #375a61a6;
    border-radius: 30px;
 }
.roadmap_cat{
    color: white;    
    padding: 5px;
    border-radius: 10px;
}
 .roadmap_project{
    position: relative;
 }
 .roadmap_project > div{
    position: absolute;
    display: none;
    background-color: #243136;
    padding: 10px;
    min-width: 300px;
    z-index: 200;
 }
 .roadmap_project:hover > div{
    display: block;
 }

 .css_header {
     /* background-image: url("images/header.png"); */
     background-size: 24px;
     background-repeat: no-repeat;
     width: auto;
     height: 90px;
 }
 

 
 .overlay_dirt {
     mix-blend-mode: darken;
     position: absolute;
     top: 0px;
 }
 
 .css_product_grid {
     display: inline-grid;
     grid-template-columns: 33.333% 33.333% 33.333%;
     grid-template-rows: 300px;
     width: 100%;
 }
 
 .css_tabloid_title {
     font-family: 'Staatliches', cursive;
     color: white;
     font-size: 40px;
     padding-top: 30px;
 }
 
 .newsletter_bar_1 a {
     text-decoration: none;
     color: inherit;
 }
 
 .css_project_thumb {
     width: 100%;
 }
 
 .css_project_tabloid {}
 
 .css_project_box {
     position: relative;
     overflow: hidden;
     height: 300px;
 }
 
 .css_project_box>img {
     height: 100%;
     width: auto;
     position: absolute;
     transform: translate(-50%, -50%);
     left: 50%;
     transition: width 1s ease-out, height 1s ease-out;
     top: 50%;
 }
 
 .css_project_box:hover>img {
     height: 110%;
     width: auto;
     position: absolute;
     transform: translate(-55%, -55%);
     left: 55%;
     top: 55%;
     transition: width 0.2s ease-out, height 0.2s ease-out;
 }
 
 .css_project_title {
     font-family: 'Staatliches', cursive;
     position: absolute;
     bottom: 10px;
     right: 10px;
     z-index: 100;
     font-size: 40px;
     color: white;
     text-shadow: 2px 2px 5px black;
     padding: 0px 0px 5px 10px;
     line-height: 31px;
     transition: color 0.6s ease, right 0.6s ease;
 }
 
 .css_project_box:hover>span {
     color: crimson;
     right: 15px;
     transition: color 0.1s ease, right 0.1s ease;
 }
 
 .email_text {
     padding: 5px 10px;
     font-family: 'Staatliches', cursive;
 }
 
 .newsletter_bar_1 {
     /* display: grid; */
     /* grid-template-columns: auto auto auto; */
     font-family: 'Staatliches', cursive;
     color: #ed6d14;
     font-size: 40px;
     width: 600px;
     margin: 58px auto 32px auto;
     background-image: linear-gradient(0deg, transparent, #a1d5cb5c, transparent);
     text-shadow: 0px 0px 4px #000000;
     padding: 0px 24px;
     text-align: center;
 }
 
 .newsletter_bar_2 {
     font-family: 'Staatliches', cursive;
     color: #ed6d14;
     font-size: 40px;
     width: 600px;
     margin: 58px auto 32px auto;
     background-image: linear-gradient(0deg, transparent, #a1d5cb5c, transparent);
     text-shadow: 0px 0px 4px #000000;
     padding: 0px 24px;
     text-align: center;
 }
 
 .newsletter_button {
     font-family: 'Staatliches', cursive;
     color: white;
     background-color: crimson;
     font-size: 35px;
     border: 2px solid rgba(170, 0, 0, 0.5);
 }
 
 .newsletter_joined {
     color: #14ed2e;
     text-shadow: 0px 0px 4px #6ae16c;
     line-height: 33px;
 }
 

.custom_newsletter_email_field{
    margin-top: 10px;
}
 
.mailchimp_signup_form{
    font: 14px Helvetica,Arial,sans-serif;
    color: white;
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0px 10px 10px #0000006e;
    background: linear-gradient(0deg, #243136, #3d545c) !important;
    line-height: 0px !important;
    
}

.mc-field-group{
    padding-bottom: 10px !important;
}

#mc_embed_signup form{
    padding: 5px !important;
}

#mc_embed_signup .mc-field-group{
    width: auto !important;
}

@keyframes signhup_scroll{
    from{background-position-x: 0px;}
    to{background-position-x: 900px;}
}