/**
 * Style adjustments
 *
 * @package    Onix template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

/* References */

.ref-color0 { color: var(--ref-color0); } /* Normal text */
.ref-color1 { color: var(--ref-color1); } /* Headings */
.ref-color2 { color: var(--ref-color2); } /* Links on dark backgrounds, bold in headings */
.ref-color3 { color: var(--ref-color3); } /* Links on light backgrounds */
.ref-color4 { color: var(--ref-color4); } /* Buttons, post rating stars, big highlight characters, lines */
.ref-color5 { color: var(--ref-color5); } /* Content frames, sidebars */
.ref-color6 { color: var(--ref-color6); } /* Footer bullets */

/* region Segment: Replace carets with angles on main menu items */
/* ============================================================= */

.main_menu_item .fa-caret-left:before  { content: "\f104"; }
.main_menu_item .fa-caret-right:before { content: "\f105"; }
.main_menu_item .fa-caret-up:before    { content: "\f106"; }
.main_menu_item .fa-caret-down:before  { content: "\f107"; }

/* ========= */
/* endregion */

/* region Segment: Other menu overrides */
/* ==================================== */

.main_menu_item .menu_toggle { font-size: 0.8em; margin-left: 5px; }

@media all and (max-width: 700px) {
    #header .main_menu_item.landing.current:not(.visible) { display: none; }
}

body.admin #header #__main_menu_logo img { height: 36px; margin-left: 10px; margin-top: 2px; }
body.admin #header #menu_holder          { padding-top: 0; padding-bottom: 0; }
body.admin #header .main_menu_item       { padding-left: 6px; padding-right: 6px; }
body.admin #header .menu                 { padding-top: 3px; }

#header .main_menu_item[data-module="accounts"][href*="/accounts/register.php"] {
    display: none;
}

#header_login_button             { color: white !important; background-color: var(--ref-color2) !important; border-radius: 10px; 
                                   line-height: 41px; height: 41px; border: 1px solid var(--ref-color2); }
#header_login_button:hover       { background-color: white !important; color: var(--ref-color2) !important; border-color: white; }
#header_login_button .fa         { display: none; }
#header_login_button             { font-size: 0; }
#header_login_button:after       { font-size: 14pt; display: inline; content: 'CONNECT'; font-weight: bold; color: black; }
#header_login_button:hover:after { color: var(--ref-color2); }

@media all and (max-width: 700px) {
    #header .menu                                { text-align: left; }
    #header .main_menu_item:not(.always_visible) { padding-left: 0; }
    #main_menu_trigger                           { font-size: 22pt; }
}

@media all and (min-width: 701px) and (max-width: 860px) {
    #header .main_menu_item:not(#header_login_button) { padding-left: 5px; padding-right: 5px; }
    #header #header_login_button                      { padding-left: 10px; padding-right: 10px; }
}

#header_login_button.visible { display: inline-block !important; width: auto; }

.dropdown_menu { overflow: hidden; }

/* ========= */
/* endregion */

/* region Segment: Home additions */
/* ============================== */

body.home[data-is-known-user="false"]   #content_wrapper ,
body[data-page-tag="landing"]           #content_wrapper ,
body[data-page-tag="landing_main"]      #content_wrapper { padding-left: 0; padding-right: 0; width: 100%; }

body.home[data-is-known-user="false"]   #content         ,
body[data-page-tag="landing"]           #content         ,
body[data-page-tag="landing_main"]      #content         { padding: 0; }

body[data-page-tag="landing"]      article.single_post ,
body[data-page-tag="landing_main"] article.single_post {
    margin: 0; padding: 0;
}

body[data-page-tag="landing"]  article .landing_segment {
    width: calc(100% + 3px);
}

/* ========= */
/* endregion */

/* region Segment: Landing / common */
/* ================================ */

.landing_segment    { color: white; }
.landing_segment    { font-size: 14pt; line-height: normal; min-height: 100px; }

.landing_segment h1 {
    margin-top: 50px;
    color: white;
    font-size: 40pt; font-weight: bold;
    text-align: center;
    display: block; vertical-align: middle;
    position: relative;
    
    background: url('v2/fire-ring.jpg') center center no-repeat;
    background-size: contain;
    line-height: 5em;
    overflow: hidden;
    
    text-shadow: 3px -3px 6px black;
}

.landing_segment h1.lefted {
    width: auto;
    max-width: 100%;
    min-width: 300px;
    display: inline-block;
    text-align: left;
    line-height: 3em;
    background-position: left center;
    padding-left: 60px;
    margin-left: -40px;
    white-space: nowrap; overflow: hidden;
}

.landing_segment h1.splitted {
    display: inline-block;
    line-height: normal;
    text-align: left;
    padding: 1em 0;
}

@media all and (max-width: 1024px) {
    .landing_segment h1              { margin-top: 0; margin-bottom: 0; }
}

@media all and (max-width: 768px) {
    .landing_segment h1              { font-size: 32pt; }
    .landing_segment h1:not(.lefted) { white-space: nowrap; text-overflow: ellipsis; }
    .landing_segment h1.lefted       { margin-left: -20px; padding-left: 30px; }
}

@media all and (max-width: 480px) {
    .landing_segment h1              { font-size: 24pt; }
    .landing_segment h1:not(.lefted) { white-space: nowrap; text-overflow: ellipsis; }
}

@media all and (max-width: 320px) {
    .landing_segment h1              { font-size: 18pt; }
    .landing_segment h1:not(.lefted) { white-space: nowrap; text-overflow: ellipsis; }
}

.landing_segment .content_segment {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.landing_segment .buttonized {
    text-align: center;
    color: black;
    border: 2px solid transparent;
    background: var(--ref-color4);
    /*background: linear-gradient(black, black) padding-box, var(--ref-border-gradient) border-box;*/
    /* font-weight: bold; */
    margin-left: 0;
    margin-right: 20px;
    font-size: 1.2em;
    line-height: 1.4em;
}

.landing_segment .buttonized:hover {
    color: var(--ref-color4);
    background: white;
    border-color: white;
}

/* Adaptation of h1 on custom areas */
.ringed_title {
    margin-top: 50px;
    color: white;
    font-size: 40pt; font-weight: bold;
    text-align: center;
    display: block; vertical-align: middle;
    position: relative;

    background: black url('v2/fire-ring.jpg') center center no-repeat;
    background-size: contain;
    line-height: 5em;
    white-space: nowrap;
    overflow: hidden;
    
    text-shadow: 3px -3px 6px black;
}
@media all and (max-width: 640px) {
    .ringed_title {
        white-space: normal;
        line-height: normal;
        padding: 1em 0;
        font-size: 28pt;
    }
}

/* ========= */
/* endregion */

/* region Segment: Landing / main */
/* ============================== */

.landing_segment.main_banner    { color: white; background: black; }
.landing_segment.main_banner h1 { color: white; font-weight: bold; text-shadow: 3px 3px 3px black; }
.landing_segment.banner         { width: calc(100% + 3px); }

.landing_segment.main_banner .content_segment  { display: block; text-align: center; padding: 0; }
.landing_segment.main_banner .content_segment  img { max-width: 90%; }

/* ========= */
/* endregion */

/* region Segment: Landing / purpose */
/* ================================= */

.landing_segment.purpose .content_segment  { padding: 20px 0; 
                                             background: black url('v2/ship-left.jpg') left center no-repeat;
                                             background-size: 50% auto; }
.landing_segment.purpose .legend           { width: 55%; order: 2; padding: 0 10%; }
.landing_segment.purpose .image            { width: 45%; order: 1; text-align: center; }
.landing_segment.purpose .image  img       { width: 60%; }

@media all and (max-width: 1024px) {
    .landing_segment.purpose                  { text-align: center; }
    .landing_segment.purpose .content_segment { background-image: none; }
    .landing_segment.purpose .legend          { width: 100%; order: 2; text-align: left; }
    .landing_segment.purpose .image           { display: none; }
}

/* ========= */
/* endregion */

/* region Segment: Landing / services */
/* ================================== */

.landing_segment.services                    { background: black;
                                               background-size: cover;
                                               text-align: center;
                                               padding: 20px; }
.landing_segment.services                    { color: white; }
.landing_segment.services h1                 { color: white; }
.landing_segment.services h2                 { font-size: 15pt; height: 3.2em; color: var(--ref-color2); }
.landing_segment.services .cards             { display: flex; flex-wrap: nowrap;
                                               justify-content: center;
                                               align-items: stretch;
                                               align-content: stretch;
                                               position: relative;
                                               width: 100%;
                                               padding: 20px 0;
                                               background: black url('v2/icons/guy.jpg') center center no-repeat;
                                               background-size: contain; }
.landing_segment.services .cards .card       { border-radius: 15px;
                                               color: white; background: linear-gradient(black, black) padding-box, var(--ref-border-gradient) border-box;
                                               border: 2px solid transparent;
                                               position: relative; text-align: center; padding: 20px 20px 40px 20px;
                                               font-size: 14pt; margin: 10px;
                                               flex-grow: 1; flex-shrink: 1;
                                               width: calc(25% - 20px); min-width: 180px; }
.landing_segment.services .cards .card .desc { margin-bottom: 155px; }
.landing_segment.services .cards .card .ic   { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; margin: 0; padding-bottom: 20px; }
.landing_segment.services .cards .card img   { height: 130px; }

.landing_segment.services .cards .card.center_left  { margin-right: 14%; }
.landing_segment.services .cards .card.center_right { margin-left:  14%; }

@media all and (max-width: 1080px) {
    .landing_segment.services .cards                    { flex-wrap: wrap; background-image: none; padding: 0; }
    .landing_segment.services .cards .card.center_left  { margin-right: 10px; }
    .landing_segment.services .cards .card.center_right { margin-left:  10px; }
}

@media all and (max-width: 600px) {
    .landing_segment.services h1  { padding: 0 10%; }
}

/* ========= */
/* endregion */

/* region Segment: Landing / token */
/* =============================== */

.landing_segment.token .content_segment  { padding: 20px 0 0 0; }
.landing_segment.token .legend           { width: 50%; order: 1; padding: 0 10%; }
.landing_segment.token .image            { width: 50%; order: 2; padding-right: 10%; }
.landing_segment.token .image  img       { width: 100%; }

@media all and (max-width: 425px) {
    .landing_segment.token .legend a.buttonized          { width: 60px !important; padding-left: 8px; padding-right: 8px; }
    .landing_segment.token .legend a.buttonized .caption { display: none; }
}


@media all and (max-width: 1024px) {
    .landing_segment.token             { text-align: center; }
    .landing_segment.token .content_segment { padding-top: 0; }
    .landing_segment.token .legend     { width: 100%; order: 1; text-align: left; }
    .landing_segment.token .image      { width: 100%; order: 2; padding: 0 10%; }
}

/* ========= */
/* endregion */

/* region Segment: Landing / game development */
/* ========================================== */

.landing_segment.game_development                { padding-top: 20px; padding-bottom: 20px; }
.landing_segment.game_development .table_bg      { background: url('v2/cz_v2.jpg') center center no-repeat;
                                                   background-size: contain;
                                                   padding: 100px 60px; }
.landing_segment.game_development table          { width: 100%; }
.landing_segment.game_development table td       { width: 30%; padding: 0 0 30px 0;
                                                   font-family: var(--body-font);
                                                   font-size: 14pt; line-height: normal;
                                                   color: white; vertical-align: bottom;
                                                   height: 190px; }
.landing_segment.game_development table td.space { width: 40%; }

.landing_segment.game_development table td.alignleft  { background: url('v2/flame.jpg') left bottom no-repeat;
                                                        background-size: auto 120px;
                                                        padding-left: 80px; }
.landing_segment.game_development table td.alignright { background: url('v2/flame.jpg') right bottom no-repeat;
                                                        background-size: auto 120px;
                                                        padding-right: 80px; }
.landing_segment.game_development .no_table           { display: none; }
.landing_segment.game_development .no_table td        { width: 100%; height: 120px; }


@media all and (max-width: 1024px) {
    .landing_segment.game_development .table_bg                    { display: none; }
    .landing_segment.game_development .no_table                    { display: block; }
    .landing_segment.game_development .no_table table              { width: 90%; margin: 0 5%; }
    
    .landing_segment.game_development .no_table table td           { padding-bottom: 20px; height: 100px; }
    .landing_segment.game_development .no_table table td.alignleft { background-size: auto 100px; padding-left: 60px; }
}

/* ========= */
/* endregion */

/* region Segment: Landing / chosen ones */
/* ===================================== */

.landing_segment.chosen_ones                   { display: inline-block;
                                                 position: relative; left: 1px; margin: 20px 24%;
                                                 padding: 30px; font-size: 14pt; }
.landing_segment.chosen_ones .image            { width: 200px; padding-right: 30px; align-self: flex-start; padding-top: 10px; }
.landing_segment.chosen_ones .legend           { width: calc(100% - 200px); padding-left: 20px; }
.landing_segment.chosen_ones .image img        { width: 100%; }
.landing_segment.chosen_ones .image span       { display: inline-block; width: 100%; position: relative; }
.landing_segment.chosen_ones .image span:after { display: inline-block; content: '';
                                                 position: absolute; bottom: -15%; right: -15%; width: 50%; height: 50%;
                                                 background: url('landing/telegram-logo.png') center center no-repeat;
                                                 background-size: contain; }
.landing_segment.chosen_ones h1                { font-size: 32pt; margin-top: 30px; color: white; }
.landing_segment.chosen_ones a                 { font-size: 14pt; line-height: normal; font-weight: normal !important; }

@media all and (max-width: 1024px) {
    .landing_segment.chosen_ones             { margin: 0 10%; }
    .landing_segment.chosen_ones .legend     { width: 100%; padding-left: 0; padding-top: 50px; }
    .landing_segment.chosen_ones .image      { width: 100%; text-align: center; padding: 0; }
    .landing_segment.chosen_ones .image span { width: 200px; }
}

@media all and (max-width: 720px) {
    .landing_segment.chosen_ones             { margin: 0 5%; }
    .landing_segment.chosen_ones h1          { font-size: 28pt; }
}

@media all and (max-width: 480px) {
    .landing_segment.chosen_ones                  { margin: 0 1%; padding: 0 1%; }
    .landing_segment.chosen_ones h1               { font-size: 24pt; }
    .landing_segment.chosen_ones .content_segment { padding: 0 4%; }
    .landing_segment.chosen_ones .legend a.buttonized.pull-right { float: none; }
}

/* ========= */
/* endregion */

/* region Segment: Purpose */
/* ======================= */

.purpose_wrapper {
    margin: 40px 0;
    padding-left: 50%;
    background: black url('v2/mage_v3.jpg') left center no-repeat;
    background-size: contain;
}

.landing_segment#values  ,
.landing_segment#vision  ,
.landing_segment#mission { padding: 0 60px 60px 0; }

@media all and (max-width: 1024px) {
    .purpose_wrapper {
        margin: 20px 0;
        padding-left: 0;
        background-image: none;
    }

    .landing_segment#values  ,
    .landing_segment#vision  ,
    .landing_segment#mission { padding: 0 20px 30px 20px; }
}

/* ========= */
/* endregion */

/* region Segment: Token */
/* ===================== */

/* Segment: Token / tokenomics */

.landing_segment#tokenomics                      { padding: 0 60px; }
.landing_segment#tokenomics .dist_comp           { background: black url("v2/dist-background.jpg") 60% top no-repeat;
                                                   background-size: 75% auto; text-align: center; padding-top: 50px; }
.landing_segment#tokenomics .dist_comp .chart    { width: 75%; position: relative; z-index: 2; }
.landing_segment#tokenomics .dist_comp .swirl    { position: relative; width: 35%; top: -5vw; left: 6%; z-index: 1; }

@media all and (max-width: 720px) {
    .landing_segment#tokenomics                      { padding: 0 20px; }
    .landing_segment#tokenomics .dist_comp           { padding-top: 20px; background-image: none; }
    .landing_segment#tokenomics .dist_comp .chart    { width: 100%; }
    .landing_segment#tokenomics .dist_comp .swirl    { width: 50%; left: 8%; }
}

/* Segment: Token / values & explorer wrapper */

#techs_explorer_wrapper {
    background: black url('v2/vitalik-alien.jpg') right center no-repeat;
    background-size: contain;
    padding-right: 40%;
}

@media all and (max-width: 1024px) {
    #techs_explorer_wrapper {
        background-image: none;
        padding-right: 0;
    }
}

/* Segment: Token / technicals */

.landing_segment#technicals           { padding: 0 60px; }

@media all and (max-width: 768px) {
    .landing_segment#technicals       { padding: 0 5%; }
    .landing_segment#technicals h1    { margin-left: -20px; padding-left: 30px; }
    .landing_segment#technicals td    { padding: 0 20px 20px 0; }
}

/* Segment: Token / explorer */

.landing_segment#explorer             { padding: 0 60px; }

@media all and (max-width: 768px) {
    .landing_segment#explorer         { padding: 0 5%; }
    .landing_segment#explorer h1      { margin-left: -20px; padding-left: 30px; }
}

/* Segment: Token / wallet */

.landing_segment#wallet               { padding: 0 60px; }

@media all and (max-width: 425px) {
    .landing_segment#wallet .legend a.buttonized          { width: 64px !important; padding-left: 10px; padding-right: 10px; }
    .landing_segment#wallet .legend a.buttonized .caption { display: none; }
}

@media all and (max-width: 1024px) {
    .landing_segment#wallet           { padding: 0 6%; }
    .landing_segment#wallet .legend   { padding: 0; }
    .landing_segment#wallet .image    { padding: 0; }
}

/* Segment: Token / exchanges */

.landing_segment#exchanges                        { padding: 0 60px; margin-bottom: 40px; }
.landing_segment#exchanges .content_segment       { display: flex;
                                                    flex-wrap: nowrap;
                                                    justify-content: center;
                                                    align-items: center;
                                                    align-content: center;
                                                    background: black url('v2/centered_circle.jpg') center center no-repeat;
                                                    background-size: 60%; }
.landing_segment#exchanges .content_segment .item { text-align: center; width: 25%; padding: 200px 0; }

@media all and (max-width: 1024px) {
    .landing_segment#exchanges .content_segment       { background-image: none; }
    .landing_segment#exchanges .content_segment .item { width: 100%; padding: 0; }
}

/* ========= */
/* endregion */

/* region Segment: Generic landing */
/* =============================== */

/* Segment: Generic landing, text at left */

.landing_segment.lefted .content_segment  { padding: 40px 0; }
.landing_segment.lefted .legend           { width: 50%; order: 1; padding: 0 10%; }
.landing_segment.lefted .image            { width: 50%; order: 2; padding-right: 10%; }
.landing_segment.lefted .image  img       { width: 100%; }

@media all and (max-width: 1024px) {
    .landing_segment.lefted             { text-align: center; }
    .landing_segment.lefted .legend     { width: 100%; order: 1; padding: 0 10%; text-align: left; }
    .landing_segment.lefted .image      { width: 100%; order: 2; padding: 0 10%; }
}

/* Segment: Generic landing, text at right */

.landing_segment.righted .content_segment  { padding: 40px 0; }
.landing_segment.righted .legend           { width: 50%; order: 2; padding: 0 10% 0 5%; }
.landing_segment.righted .image            { width: 50%; order: 1; padding-left: 10%; }
.landing_segment.righted .image  img       { width: 90%; }

@media all and (max-width: 1024px) {
    .landing_segment.righted             { text-align: center; }
    .landing_segment.righted .legend     { width: 100%; order: 1; padding: 0 10%; text-align: left; }
    .landing_segment.righted .image      { width: 100%; order: 2; padding: 0 10%; }
}

/* Segment: Generic landing, flat */

.landing_segment.flat { padding: 40px 10%; }

/* ========= */
/* endregion */

/* Patch for images in the contact section */

.landing_segment#contact .image a   { display: inline-block; vertical-align: top; 
                                      font-family: var(--tables-font), 'Arial Narrow', Arial, Helvetica, sans-serif;
                                      font-size: 10pt; text-align: center; }
.landing_segment#contact .image img { width: unset; }

/* region Segment: Footer elements */
/* =============================== */

#footer { text-shadow: 1px 1px 2px black; }

#footer .custom_placed { margin-bottom: 20px; }

#footer .custom_placed .leftcol .social_icon {
    height: 50px; margin-right: 10px; margin-bottom: 10px;
}

#footer .credits_line                          { font-size: 10pt; }
#footer .credits_line > span                   { /* display: inline-block; white-space: nowrap; */ }
#footer .credits_line > span:after             { display: inline-block; content: "|"; margin: 0 10px; }
#footer .credits_line > span:last-child:after  { display: none; }
#footer .credits_line .poweredby_line          { font-size: 0; }
#footer .credits_line .poweredby_line:after    { font-size: 10pt; }
#footer .credits_line .poweredby_line a        { font-size: 10pt; }
#footer .credits_line .poweredby_line a:before { display: inline; content: 'Powered by '; }
#footer .custom_placed .buttonized             { margin-left: 0; margin-right: 0; }

@media all and (max-width: 720px) {
    #footer .custom_placed .col            { width: 100%; text-align: center; }
    #footer .custom_placed .col .alignleft { text-align: center; }
}

#footer .buttonized       { color: black; background: var(--ref-color2);
                            border: 2px solid var(--ref-color2); text-shadow: none; }
#footer .buttonized:hover { color: var(--ref-color2); background: white; border-color: white; }
#footer .explore_col a    { width: 130px; text-align: center; font-weight: bold; }

@media all and (max-width: 720px) {
    #footer .custom_placed .leftcol .social_icon { height: auto; width: calc(20% - 14px); max-width: 50px; }
}

@media all and (min-width: 968px) {
    #footer .custom_placed .leftcol .social_icon { height: auto; width: calc(20% - 14px); max-width: 50px; }
}

body[data-viewport-class="480"]  #footer .custom_placed .leftcol .social_icon {  }
body[data-viewport-class="768"]  #footer .custom_placed .leftcol .social_icon {  }
body[data-viewport-class="1024"] #footer .custom_placed .leftcol .social_icon {  }
body[data-viewport-class="1280"] #footer .custom_placed .leftcol .social_icon {  }
body[data-viewport-class="1360"] #footer .custom_placed .leftcol .social_icon {  }
body[data-viewport-class="1920"] #footer .custom_placed .leftcol .social_icon {  }

/* ========= */
/* endregion */

/* Patches for the landing page in stand-alone */

body[data-page-tag="landing_main"] .landing_segment.chosen_ones {
    display: none;
}

body[data-page-tag="landing"]      article > h1                 ,
body[data-page-tag="landing_main"] article > h1                 ,
body[data-page-tag="landing"]      article .single_item_actions ,
body[data-page-tag="landing_main"] article .single_item_actions ,
body[data-page-tag="distribution"] article .single_item_actions { display: none; }

/* "Technicals" landing section stuff */

.landing_segment#technicals table td {
    font-size: 14pt; font-family: var(--body-font), Arial, Helvetica, sans-serif;
}

.landing_segment#technicals big { color: var(--ref-color2); }

@media all and (max-width: 720px) {
    .landing_segment#technicals table    { display: block; }
    .landing_segment#technicals table tr { display: block; }
    .landing_segment#technicals table td { display: inline-block; }
}

/* region Company news cards transformer */
/* ===================================== */

.news_cards_container {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    overflow: auto;
    overflow-y: hidden;
    padding-bottom: 20px;
}

.news_cards_container card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    min-width: 300px;
    border-radius: 10px;
    margin: 0 20px 0 0;
    position: relative;
    padding-bottom: 40px;
    color: black;
    background-color: white;
}

.news_cards_container card:first-child { margin-left:  0; }
.news_cards_container card:last-child  { margin-right: 0; }

.news_cards_container card thumbnail { display: inline-block; width: 100%; order: 1; margin-bottom: 20px; }
.news_cards_container card thumbnail { display: none; }
.news_cards_container card date_ago  { display: inline-block; width: 100%; order: 2; margin-bottom: 20px; padding: 0 20px; }
.news_cards_container card title     { display: inline-block; width: 100%; order: 3; margin-bottom: 20px; padding: 0 20px; }
.news_cards_container card excerpt   { display: inline-block; width: 100%; order: 4; margin-bottom: 20px; padding: 0 20px; }
.news_cards_container card permalink { display: block;        width: 100%; order: 5; }
.news_cards_container card date      { display: none; }
.news_cards_container card mini_date { display: none; }

.news_cards_container card thumbnail     ,
.news_cards_container card thumbnail img { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.news_cards_container card thumbnail     { height: 200px; text-align: center; background-color: black; }
.news_cards_container card thumbnail img { height: 200px; object-fit: cover; }

.news_cards_container card date_ago     { font-size: 0.8em; margin-top: 20px; }
.news_cards_container card date_ago .fa { color: var(--ref-color2); font-size: 1.2em; }
.news_cards_container card title        { font-size: 1.1em; font-weight: bold; }
.news_cards_container card excerpt      { font-size: 0.9em; height: 8.5em; overflow: hidden; }
.news_cards_container card permalink    { position: absolute; bottom: 20px; left: 0; right: 0; font-size: 0.8em; text-align: center; }
.news_cards_container card permalink a  { margin-right: 0 !important; }

/* Patches for the news cards on the project page */

.news_cards_container card.lighted_frame           { color: white; background-color: black; margin: 0; }
.news_cards_container card.lighted_frame permalink { bottom: 40px; right: 30px; }

/* Project team cards transformer */

team_cards {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: center;
}

team_cards card {
    display: inline-block;
    position: relative;
    width: calc(30% - 100px);
    min-width: 240px;
    border-radius: 10px;
    padding: 10px;
    margin: 20px 50px;
    text-align: center;
    color: white;
    background-color: transparent;
}

team_cards card img {
    width: 100%;
    border-radius: 20px;
    border: 5px solid white;
    background-color: white;
}

team_cards card name {
    color: var(--ref-color2);
    display: inline-block;
    font-weight: bold;
    width: 100%;
    margin: 10px 0 0 0;
}

team_cards card title {
    color: white;
    display: inline-block;
    font-size: 0.8em;
    width: 100%;
    margin: 5px 0 10px 0;
}

team_cards card links {
    display: inline-block;
    width: 100%;
}

@media all and (max-width: 1024px) {
    team_cards card {
        min-width: 160px;
        width: calc(30% - 40px);
        margin: 20px 20px;
    }
}

/* ========= */
/* endregion */

/* region Roadmap transformer */
/* ========================== */

roadmap {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    overflow: auto;
    overflow-y: hidden;
    padding-bottom: 100px;
}

/* Note: this line is patched with JS markup added to the page */
roadmap:before {
    position: absolute;
    bottom: 62px;
    left: 35px;
    content: '';
    height: 1px;
    width: 100%;
    background: url(data:image/gif;base64,R0lGODlhAQABAPAAAPS+AP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==) top left repeat-x;
}

roadmap entry {
    display: inline-block;
    position: relative;
    width: 100%;
    min-width: 250px;
    color: black;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin: 0 20px;
}

roadmap entry:after {
    display: inline-block;
    position: absolute;
    left: 18px;
    bottom: -14px;
    content: '';
    border-left:  20px solid transparent;
    border-right: 20px solid transparent;
    border-top:   15px solid white;
}

roadmap entry:first-child {
    margin-left: 0;
}

roadmap entry:last-child {
    margin-right: 0;
}

roadmap entry title {
    display: inline-block;
    width: 100%;
    height: 3em;
    overflow: hidden;
    font-size: 16pt;
    font-weight: bold;
}

roadmap entry content {
    font-size: 12pt;
}

roadmap entry date {
    display: inline-block;
    position: absolute;
    bottom: -80px;
    left: 0;
    color: var(--ref-color2);
}

roadmap entry date:before {
    display: inline-block;
    content: '●';
    position: absolute;
    top: -40px;
    left: 30px;
    font-size: 30px;
    color: var(--ref-color2);
}

roadmap entry.highlighted date:before {
    content: '●';
    position: absolute;
    top: -60px;
    left: 21px;
    font-size: 61px;
    color: black;
    text-shadow: 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2)
               , 0 0 3px var(--ref-color2);
    border-radius: 100%;
}

roadmap entry.highlighted date:after {
    display: inline-block;
    content: '✔';
    position: absolute;
    top: -45px;
    left: 30px;
    font-size: 30px;
    color: var(--ref-color2);
}

/* Patches for the roadmap in the project page */

.landing_segment#roadmap roadmap entry {
    color: white;
    background-color: black;
    border: 6px solid var(--ref-color2);
}

.landing_segment#roadmap roadmap entry:after {
    bottom: -15px;
    border-top-color: var(--ref-color2);
}

.landing_segment#roadmap roadmap:before {
    bottom: 68px;
}

@media all and (max-width: 480px) {
    .landing_segment#roadmap { padding-top: 0; }
}

/* ========= */
/* endregion */

/* region Segment: Restoring stuff */
/* =============================== */

a.greengo  , .pseudo_link.greengo  , .greengo   { color: green;     text-shadow: none; }
a.alternate, .pseudo_link.alternate, .alternate { color: #5A42EB;   text-shadow: none; }
a.important, .pseudo_link.important, .important { color: orange;    text-shadow: none; }
a.critical,  .pseudo_link.critical , .critical  { color: red;       text-shadow: none; }
a.disabled,  .pseudo_link.disabled , .disabled  { color: dimgrey;   text-shadow: none; }

.page_item            , .card_entry            { background-color: white;   color: black;   }
.page_item.incomplete , .card_entry.incomplete { background-color: #FDEDF0; color: darkred; }
.page_item.published  , .card_entry.published  { background-color: #E3FCE3; }
.page_item.alerted    , .card_entry.alerted    { background-color: #FEFBC2; }
.page_item.hidden     , .card_entry.hidden     { background-color: #EDEDED; color: dimgrey; }

/* Note: stuff for indexes */

body.home article .user_avatar                                           { display: none; }
body.home article .meta_section.upper                                    { display: none; }

/* Indexes */
body[data-category-slug="news"]              article .user_avatar        { display: none; }
body[data-category-slug="news"]              article .meta_section.upper { display: none; }
body[data-category-slug="docs"]              article .user_avatar        { display: none; }
body[data-category-slug="docs"]              article .meta_section.upper { display: none; }
body[data-category-slug="superstakers"]      article .user_avatar        { display: none; }
body[data-category-slug="superstakers"]      article .meta_section.upper { display: none; }

/* Docs forumized index */
body[data-category-slug="docs"]              tr.post td.avatar                                { display: none; }
body[data-category-slug="docs"]              tr.post td.details .meta_field.user_display_name { display: none; }
body[data-category-slug="docs"]              tr.post td.details .show_counts                  { display: none; }

/* Single posts */
body[data-main-category-slug="news"]         article .user_avatar        { display: none; }
body[data-main-category-slug="news"]         article .meta_section.upper { display: none; }
body[data-main-category-slug="docs"]         article .user_avatar        { display: none; }
body[data-main-category-slug="docs"]         article .meta_section.upper { display: none; }
body[data-main-category-slug="superstakers"] article .user_avatar        { display: none; }
body[data-main-category-slug="superstakers"] article .meta_section.upper { display: none; }

/* Moar extras */

#header .main_menu_item#loggedin_username { padding-right: 0; }

.forumizer table tr               { background: black url('v2/horizontal-line.jpg') bottom center no-repeat;
                                    background-size: 100% 60px; }
.forumizer table tr:last-child    { background-image: none; }
.forumizer table tr td            { border-bottom: none; padding-top: 10px; padding-bottom: 70px; }
.forumizer table tr:last-child td { padding-bottom: 0; }

.forumizer table tr td.details ,
.forumizer table tr td.extra   { font-family: var(--body-font); }

.forumizer tr.post .details     { width: 100%; }
.forumizer tr.post .views_count { display: none; }
.forumizer tr.post .details .meta_box                           { margin-left:   3px; }
.forumizer tr.post .details .meta_box .meta_section:first-child { margin-left: -10px; }
.forumizer tr.post .details .meta_box .meta_section:last-child  { margin-left:  -4px; }

/* ========= */
/* endregion */

/* region Segment: customized category headers to suit the template styles --> news */
/* ================================================================================ */

body[data-page-tag="post_category_index"][data-category-slug="news"] .category_banner h1 {
    display: none;
}

body[data-page-tag="post_category_index"][data-category-slug="news"] .category_banner .description {
    font-size: 14pt;
    line-height: normal;
    min-height: 100px;
    padding-left: 30px; padding-right: 30px;
}

/* ========= */
/* endregion */

/* region Segment: customized category headers to suit the template styles --> docs */
/* ================================================================================ */

body[data-page-tag="post_category_index"][data-category-slug="docs"] .category_banner h1 {
    display: none;
}

body[data-page-tag="post_category_index"][data-category-slug="docs"] .category_banner .description {
    font-size: 14pt;
    line-height: normal;
    min-height: 100px;
    padding-left: 30px; padding-right: 30px;
}

body[data-page-tag="post_category_index"][data-category-slug="docs"] .posts_list td { font-size: 14pt; }

/* ========= */
/* endregion */

/* region Segment: customized category headers to suit the template styles --> superstakers */
/* ======================================================================================== */

body[data-page-tag="post_category_index"][data-category-slug="superstakers"] .category_banner h1 {
    display: none;
}

body[data-page-tag="post_category_index"][data-category-slug="superstakers"] .category_banner .description {
    font-size: 14pt;
    line-height: normal;
    min-height: 100px;
    padding-left: 30px; padding-right: 30px;
}

/* ========= */
/* endregion */

/* Segment: action buttons on posts (permalink, report to webmaster, mail to author) */

body article.single_post .single_item_actions .item.action.clipboard-copy { display: none; }
body article.single_post .single_item_actions .item.action[href*="/contact"] { display: none; }

.single_item_actions .seamless_left {
    color: white;
    background-color: #990d0d;
}

/* region Segment: post rating styles */
/* ================================== */

.post_ratings_container.large {
    color: black;
}

.post_ratings_container.large .posts_rating_target {
    box-shadow: none;
}

.post_ratings_container .stars i {
    color: var(--ref-color2); cursor: pointer;
    text-shadow:  1px  0    0 var(--ref-color2-darker),
                  1px  1px  0 var(--ref-color2-darker),             
                  0    1px  0 var(--ref-color2-darker),
                 -1px  1px  0 var(--ref-color2-darker),
                 -1px  0    0 var(--ref-color2-darker),
                 -1px -1px  0 var(--ref-color2-darker),
                  0   -1px  0 var(--ref-color2-darker),
                  1px -1px  0 var(--ref-color2-darker);
}

.post_ratings_container .stars i.hovered {
    color: var(--ref-color2-lighter);
    text-shadow:  1px  0    0 var(--ref-color2),
                  1px  1px  0 var(--ref-color2),             
                  0    1px  0 var(--ref-color2),
                 -1px  1px  0 var(--ref-color2),
                 -1px  0    0 var(--ref-color2),
                 -1px -1px  0 var(--ref-color2),
                  0   -1px  0 var(--ref-color2),
                  1px -1px  0 var(--ref-color2);
}

.post_ratings_container.inactive .stars i {
    color: var(--ref-color2); cursor: auto;
    text-shadow:  1px  0    0 var(--ref-color2-darker),
                  1px  1px  0 var(--ref-color2-darker),             
                  0    1px  0 var(--ref-color2-darker),
                 -1px  1px  0 var(--ref-color2-darker),
                 -1px  0    0 var(--ref-color2-darker),
                 -1px -1px  0 var(--ref-color2-darker),
                  0   -1px  0 var(--ref-color2-darker),
                  1px -1px  0 var(--ref-color2-darker);
}

/* ========= */
/* endregion */

/* region Segment: v2 additions */
/* ============================ */

a.arrowed, .pseudo_link.arrowed {
    position: relative;
    margin-left: 40px;
    font-style: italic;
}

a.arrowed:before, .pseudo_link.arrowed:before {
    display: inline-block;
    content: '';
    position: relative;
    vertical-align: top;
    margin-left: -40px;
    width: 40px;
    height: 1.2em;
    background: url('v2/flame-arrow.jpg') top left no-repeat;
    background-size: contain;
}

.lighted_frame, #contact_form {
    color: white;
    margin: 20px 0;
    background-color: black;
    padding: 100px;
    min-height: 500px;
    
    background-image:
        url('v2/lighted_frame/top_left.jpg'),           /* top_left        */
        url('v2/lighted_frame/top_right.jpg'),          /* top_right       */
        url('v2/lighted_frame/top_center_2.jpg'),       /* top_center_2    */
        url('v2/lighted_frame/top_center_1.jpg'),       /* top_center_1    */
        url('v2/lighted_frame/top_center_3.jpg'),       /* top_center_3    */
        url('v2/lighted_frame/bottom_left.jpg'),        /* bottom_left     */
        url('v2/lighted_frame/bottom_right.jpg'),       /* bottom_right    */
        url('v2/lighted_frame/bottom_center_2.jpg'),    /* bottom_center_2 */
        url('v2/lighted_frame/bottom_center_1.jpg'),    /* bottom_center_1 */
        url('v2/lighted_frame/bottom_center_3.jpg'),    /* bottom_center_3 */
        url('v2/lighted_frame/left_middle_2.jpg'),      /* left_middle_2   */
        url('v2/lighted_frame/left_middle_1.jpg'),      /* left_middle_1   */
        url('v2/lighted_frame/left_middle_3.jpg'),      /* left_middle_3   */
        url('v2/lighted_frame/right_middle_2.jpg'),     /* right_middle_2  */
        url('v2/lighted_frame/right_middle_1.jpg'),     /* right_middle_1  */
        url('v2/lighted_frame/right_middle_3.jpg'),     /* right_middle_3  */
        url('v2/lighted_frame/center.jpg'),             /* center          */
        none
    ;
    
    background-position:
        left                top,                        /* top_left        */
        right               top,                        /* top_right       */
        center              top,                        /* top_center_2    */
        100px               top,                        /* top_center_1    */
        calc(100% - 90px)   top,                        /* top_center_3    */
        left                bottom,                     /* bottom_left     */
        right               bottom,                     /* bottom_right    */
        center              bottom,                     /* bottom_center_2 */
        100px               bottom,                     /* bottom_center_1 */
        calc(100% - 92px)   bottom,                     /* bottom_center_3 */
        left                center,                     /* left_middle_2   */
        left                90px,                       /* left_middle_1   */
        left                calc(100% - 90px),          /* left_middle_3   */
        right               center,                     /* right_middle_2  */
        right               90px,                       /* right_middle_1  */
        right               calc(100% - 90px),          /* right_middle_3  */
        100px               90px,                       /* center          */
        center              center;
    ;
    
    background-size:
        100px               90px,                       /* top_left        */
        98px                90px,                       /* top_right       */
        calc(100% - 182px)  90px,                       /* top_center_2    */
        50%                 90px,                       /* top_center_1    */
        50%                 90px,                       /* top_center_3    */
        100px               92px,                       /* bottom_left     */
        98px                92px,                       /* bottom_right    */
        calc(100% - 182px)  92px,                       /* bottom_center_2 */
        50%                 92px,                       /* bottom_center_1 */
        50%                 92px,                       /* bottom_center_3 */
        100px               auto,                       /* left_middle_2   */
        100px               calc(50%  - 90px),          /* left_middle_1   */
        100px               calc(50%  - 90px),          /* left_middle_3   */
        98px                auto,                       /* right_middle_2  */
        98px                calc(50%  - 90px),          /* right_middle_1  */
        98px                calc(50%  - 90px),          /* right_middle_3  */
        calc(100% - 182px)  calc(100% - 180px),         /* center          */
        0                   0
    ;
    
    background-repeat:
        no-repeat,                                      /* top_left        */
        no-repeat,                                      /* top_right       */
        no-repeat,                                      /* top_center_2    */
        no-repeat,                                      /* top_center_1    */
        no-repeat,                                      /* top_center_3    */
        no-repeat,                                      /* bottom_left     */
        no-repeat,                                      /* bottom_right    */
        no-repeat,                                      /* bottom_center_2 */
        no-repeat,                                      /* bottom_center_1 */
        no-repeat,                                      /* bottom_center_3 */
        no-repeat,                                      /* left_middle_2   */
        no-repeat,                                      /* left_middle_1   */
        no-repeat,                                      /* left_middle_3   */
        no-repeat,                                      /* right_middle_2  */
        no-repeat,                                      /* right_middle_1  */
        no-repeat,                                      /* right_middle_3  */
        no-repeat,                                      /* center          */
        no-repeat;
    ;
}

.lighted_frame.smaller {
    
    padding: 50px;
    min-height: 280px;
    
    background-position:
        left                top,                        /* top_left        */
        right               top,                        /* top_right       */
        center              top,                        /* top_center_2    */
        50px                top,                        /* top_center_1    */
        calc(100% - 45px)   top,                        /* top_center_3    */
        left                bottom,                     /* bottom_left     */
        right               bottom,                     /* bottom_right    */
        center              bottom,                     /* bottom_center_2 */
        50px                bottom,                     /* bottom_center_1 */
        calc(100% - 46px)   bottom,                     /* bottom_center_3 */
        left                center,                     /* left_middle_2   */
        left                45px,                       /* left_middle_1   */
        left                calc(100% - 45px),          /* left_middle_3   */
        right               center,                     /* right_middle_2  */
        right               45px,                       /* right_middle_1  */
        right               calc(100% - 45px),          /* right_middle_3  */
        50px                45px,                       /* center          */
        center              center;
    ;
    
    background-size:
        50px                45px,                       /* top_left        */
        49px                45px,                       /* top_right       */
        calc(100% - 91px)   45px,                       /* top_center_2    */
        50%                 45px,                       /* top_center_1    */
        50%                 45px,                       /* top_center_3    */
        50px                46px,                       /* bottom_left     */
        49px                46px,                       /* bottom_right    */
        calc(100% - 91px)   46px,                       /* bottom_center_2 */
        50%                 46px,                       /* bottom_center_1 */
        50%                 46px,                       /* bottom_center_3 */
        50px                auto,                       /* left_middle_2   */
        50px                calc(50%  - 45px),          /* left_middle_1   */
        50px                calc(50%  - 45px),          /* left_middle_3   */
        49px                auto,                       /* right_middle_2  */
        49px                calc(50%  - 45px),          /* right_middle_1  */
        49px                calc(50%  - 45px),          /* right_middle_3  */
        calc(100% - 91px)   calc(100% - 90px),          /* center          */
        0                   0
    ;
}

@media all and (max-width: 1024px)
{
    /* Note: smaller lighted frame is enforced upon the standard size. */
    .lighted_frame, #contact_form {
        
        padding: 50px;
        min-height: 280px;
        
        background-position:
            left                top,                        /* top_left        */
            right               top,                        /* top_right       */
            center              top,                        /* top_center_2    */
            50px                top,                        /* top_center_1    */
            calc(100% - 45px)   top,                        /* top_center_3    */
            left                bottom,                     /* bottom_left     */
            right               bottom,                     /* bottom_right    */
            center              bottom,                     /* bottom_center_2 */
            50px                bottom,                     /* bottom_center_1 */
            calc(100% - 46px)   bottom,                     /* bottom_center_3 */
            left                center,                     /* left_middle_2   */
            left                45px,                       /* left_middle_1   */
            left                calc(100% - 45px),          /* left_middle_3   */
            right               center,                     /* right_middle_2  */
            right               45px,                       /* right_middle_1  */
            right               calc(100% - 45px),          /* right_middle_3  */
            50px                45px,                       /* center          */
            center              center;
        ;
        
        background-size:
            50px                45px,                       /* top_left        */
            49px                45px,                       /* top_right       */
            calc(100% - 91px)   45px,                       /* top_center_2    */
            50%                 45px,                       /* top_center_1    */
            50%                 45px,                       /* top_center_3    */
            50px                46px,                       /* bottom_left     */
            49px                46px,                       /* bottom_right    */
            calc(100% - 91px)   46px,                       /* bottom_center_2 */
            50%                 46px,                       /* bottom_center_1 */
            50%                 46px,                       /* bottom_center_3 */
            50px                auto,                       /* left_middle_2   */
            50px                calc(50%  - 45px),          /* left_middle_1   */
            50px                calc(50%  - 45px),          /* left_middle_3   */
            49px                auto,                       /* right_middle_2  */
            49px                calc(50%  - 45px),          /* right_middle_1  */
            49px                calc(50%  - 45px),          /* right_middle_3  */
            calc(100% - 91px)   calc(100% - 90px),          /* center          */
            0                   0
        ;
    }
}

/* ========= */
/* endregion */

/* Contact form fixes */

#contact_form { margin-left: 10%; margin-right: 10%; }
@media all and (max-width: 768px) {
    #contact_form { margin-left: 0; margin-right: 0; }
}
#contact_form .field .input {
    margin-left: 0;
}

#contact_form .field .input input[type="text"] ,
#contact_form .field .input textarea {
    border: 2px solid silver; border-radius: 5px;
}
#contact_form button {
    font-size: 14pt;
}

#contact_form p:last-child { text-align: right; }

.g-recaptcha { overflow: hidden; }

/* Slicing stuff */

.slipping_top_banner {
    max-width: unset;
    width: calc(100% + 104px);
    position: relative;
    margin-top: -30px;
    margin-left: -50px;
}

body[data-page-tag="distribution"] .slipping_top_banner {
    max-width: unset;
    width: calc(100% + 64px);
    margin-left: -30px;
}

@media all and (max-width: 480px) {
    .slipping_top_banner {
        max-width: unset;
        width: calc(100% + 73px);
        margin-top: -15px;
        margin-left: -35px;
    }
    
    body[data-page-tag="distribution"] .slipping_top_banner {
        max-width: unset;
        width: calc(100% + 53px);
    }
}