@font-face {
   font-family: 'ChakraPetchLight';
      src: url('fonts/ChakraPetch-Light.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ChakraPetchSemiBold';
      src: url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ChakraPetchRegular';
      src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ChakraPetchBold';
      src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

:root {

    --fontFaimly_default: 'ChakraPetchRegular', sans-serif;
    --fontFaimly_text: 'ChakraPetchRegular', sans-serif;
    --fontFaimly_header: 'ChakraPetchLight', sans-serif;
    --fontFaimly_button: 'ChakraPetchBold', sans-serif;
    --fontFaimly_semi: 'ChakraPetchSemiBold', sans-serif;

    --font_color_basic: rgb(139,172,211);
    --font_color_link: rgb(166,198,236);
    --font_color_link_hovered: rgb(177 213 255);
    
    --hud_valueline_bckimg: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%), linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%), linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%);

    --hud_popiseck_gray_color: rgba(120,120,120,1);

    --hud_backgroundcolor: rgba(0,0,0,0.95);
    --hud_backgroundcolor_industry_box: rgba(0,0,0,0.95);

    --hud_valuecolor: rgb(166,240,255);
    --hud_buttonlabelcolor: rgb(166,240,255);
    --hud_bookmarkcolor: rgba(255,255,255,1);
    --hud_bookmarkbackgroundcolor: rgba(255,255,255,0.1);
    --hud_tablecolor: rgba(255,255,255,1);
    --hud_tablebackgroundcolor: rgba(0,0,0,0);
    --hud_tablevaluecolor: rgb(255,255,255);
    --hud_barvaluecolor: rgb(166,240,255);

    --hud_health_text_color: rgb(255,255,255);
    --hud_health_bar_color: rgba(255,255,255,1);
    --hud_health_barbckg_color: rgba(85,85,85,1);

    --hud_healthcanheal_bar_color: rgb(180,130,0);

    --hud_storage_bar_color: rgb(130, 194, 224);
    --hud_storage_text_color: rgb(130, 194, 224);
    --hud_storage_barbckg_color: rgba(57, 83, 95,1);


    --hud_fuel_bar_color: rgb(130, 194, 224);
    --hud_fuel_text_color: rgb(130, 194, 224);
    --hud_fuel_barbckg_color: rgba(57, 83, 95,1);

    --hud_exp_bar_color: rgb(152,100,17);
    --hud_exp_text_color: rgb(220,146,28);
    --hud_exp_barbckg_color: rgba(152,100,17,.5);

    --hud_sexp_bar_color: rgb(152,100,17);
    --hud_sexp_text_color: rgb(220,146,28);
    --hud_sexp_barbckg_color: rgba(152,100,17,.5);

    --hud_quarters_bar_color: rgb(0,0,0);
    --hud_quarters_text_color: rgb(255,255,255);
    --hud_quarters_barbckg_color: rgba(255,255,255,.5);

    --hud_quarters_bar_color_light: rgb(255,255,255);
    --hud_quarters_text_color_light: rgb(255,255,255);
    --hud_quarters_barbckg_color_light: rgba(255,255,255,.5);

    --hud_energy_bar_color: rgb(255,255,255);
    --hud_energy_text_color: rgb(255,255,255);
    --hud_energy_barbckg_color: rgba(255,255,255,.5);

    --hud_invalid_color: #b92b00;
    --hud_invalid_background: #b92b00;
    --hud_invalid_text: black;

    --hud_valid_color: white;
    --hud_valid_background: white;
    --hud_valid_text: black;

    --hud_construction_bar_color: rgb(180,130,0);
    --hud_construction_text_color: rgb(180,130,0);
    --hud_construction_barbckg_color: rgba(180,130,0,.5);

    --shadow_textfull:  -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -1px  0px 0px #000, 1px  0px 0px #000, -1px  1px 0px #000, 0px  1px 0px #000, 1px  1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000, 1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px  0px 0px #000, 2px  1px 0px #000, 2px  2px 0px #000, 1px  2px 0px #000, 0px  2px 0px #000, -1px  2px 0px #000, -2px  2px 0px #000, -2px  1px 0px #000, -2px  0px 0px #000, -2px -1px 0px #000;
    --shadow_boxfull:  -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000, 1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000, 2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000, -1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000, -2px -1px 0px #000;
    --shadow_drpofull:
        /*drop-shadow(-1px -1px 0px #000) */
        drop-shadow(0px -1px 0px #000)
        /*drop-shadow(1px -1px 0px #000) */
        drop-shadow(-1px  0px 0px #000)
        drop-shadow(1px  0px 0px #000)
        /*drop-shadow(-1px  1px 0px #000)*/
        drop-shadow(0px  1px 0px #000)
        /*drop-shadow(1px  1px 0px #000) */
        ;

    --border-color: rgba(255,255,255,0.05);
    --border-effect-color: rgba(255,255,255,0.3);
    --box-background: rgba(0,0,0,0.1);
    --box-background-unavailable: rgba(0,0,0,0.1);
    --box-backdrop-filter: none;/*blur(8px)*/
    --barbox-background: rgba(255,255,255,0.3);

    --box-topbackground: rgba(20,20,20,1);
    --border-topeffect-color: rgba(255,255,255,0.5);
    --historyline_color: rgb(155,155,155);

    --gitem-background: rgba(20,20,20,1);
    --gitem-border: rgba(255,255,255,0.4);
    --gitem-corner: rgba(255,255,255,0.6);
    --gitem-site: rgba(255,255,255,0.2);

    --line-background: rgba(0,0,0,1);


    --hud-window-max-width: 1300px;

    --color-t: #9F110E;
    --color-e: #256080;
    --color-s: #3D897F;

    --clip_t: polygon(10px 0,calc(100%) 0,100% 10px,100% calc(100% + -3px), calc(100%) calc(100% + -3px), calc(100% + -6px) calc(100% + -3px),calc(100% + -6px) calc(100%) ,0px calc(100%),0px 10px  );
    --clip_e: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_s: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --clip_btn_menu: polygon(0 3px, calc(100% - 5px) 3px, 100% calc(5px + 3px), 100% 100%,  0px calc(100%));
    --clip_btn_1: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 15px 100%, 11px calc(100% + -3px), 0px calc(100% - 3px));
    --clip_btn_2: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%, calc(100% - 19px) 100%, calc(100% - 19px) calc(100% - 10px), calc(100% - 76px) calc(100% - 10px), calc(100% - 76px) 100%, calc(20px) 100%, 0 calc(100% - 20px));
    --clip_play_btn: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_login_btn: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_btn_ship: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%, calc(100% - 19px) 100%, calc(100% - 19px) calc(100% - 5px), calc(100% - 76px) calc(100% - 5px), calc(100% - 76px) 100%, calc(20px) 100%, 0 calc(100% - 20px));
    --clip_btn_ship_select: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --clip_waitbox: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 8px), calc(100% - 70px) calc(100% - 8px), calc(100% - 70px) 100%, calc(20px) 100%, 0 calc(100% - 20px));

    --clip_dock_waitbox: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%,   calc(20px) 100%, 0 calc(100% - 20px));



    --clip_marketing:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_win_destroyed: polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 20px), calc(100% - 20px) calc(100%),  calc(5px + 10px) 100%, calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_win_new: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 35% 100%, calc(35% - 3px) calc(100% - 3px), 0 calc(100% - 3px));
    --clip_win_marketoffer: polygon(0 0, calc(100% - 10px) 0, 100% 10px,  calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%, calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_win_new_link: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 75% 100%, calc(75% - 3px) calc(100% - 3px), 0 calc(100% - 3px));


    --clip_zalozka: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px), 0 calc(100% - 2px));
    --clip_refinery_service: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, calc(100% - 25px) calc(100% - 10px),calc(100% - 85px) calc(100% - 10px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(48% + 5px), 0 48%);
    --clip_refinery_process: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%,  5px 100%, 5px calc(48% + 5px), 0 48%);
    --clip_refinery_embarkwindow: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, calc(100% - 25px) 100%, calc(100% - 25px) calc(100% - 10px),calc(100% - 85px) calc(100% - 10px),calc(100% - 85px) calc(100%),10px 100%, 10px calc(66% + 10px), 0 66%);

    --clip_refinery_refinebox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(66% + 10px), 0 66%);

    --clip_cstation_buybox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px) , calc(100% - 10px) 100% , 5px 100%, 5px calc(66% + 5px), 0 66%);
    --clip_itembox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px) , calc(100% - 10px) 100% , 5px 100%, 5px calc(60% + 5px), 0 60%);

    --clip_underline: polygon(0 0, 100% 0, 100% 1px, calc(50px) 1px, calc(50px - 4px) 4px, 0 4px);
    --clip_underline_right: polygon(0 0, 100% 0, 100% 4px, calc(100% - 50px) 4px, calc(100% - 50px - 4px) 1px, 0 1px);

    --clip_attribute: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_button: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_title: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --clip_controller: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --clip_subzalozka: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px), calc(100% - 40px) calc(100% - 2px), calc(100% - 40px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
    --clip_subzalozka_nocount: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));

    --clip_market_catalog_item: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 71px), 0 calc(100% - 71px));

    --clip_astronaut:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 10px),calc(100% - 65px) calc(100% - 10px),calc(100% - 65px) calc(100%),5px 100%, 5px calc(150px + 5px), 0 150px);

    --clip_zonemeber:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 10px),calc(100% - 95px) calc(100% - 10px),calc(100% - 95px) calc(100%),5px 100%, 5px calc(80px + 5px), 0 80px);

    --clip_button_right: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_button_left: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 11px, calc(100% ) 11px, 100% 100%, 6px 100%, 0 calc(100% - 6px));

    --clip_button_astronaut: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_window_construction:  polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 10px), calc(100% - 245px) calc(100% - 10px), calc(100% - 245px - 10px) calc(100%),10px calc(100%), 10px calc(350px + 10px), 0 350px);

    --clip_personel: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_personel_occupation: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_fleetcrew: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 3px) 100%, 3px 100%, 3px calc(46% + 3px), 0 46%);
    --clip_fleetship:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 18px), calc(100% - 70px) calc(100% - 18px),calc(100% - 70px - 18px) calc(100%),73px calc(100%), 73px calc(100% - 10px),0 calc(100% - 10px));

    --clip_dockfleetship:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%,  0 100%);
    --clip_dockfleetcrew: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);


    --clip_hangar_crewbar: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 3px) 100%, 3px 100%, 3px calc(46% + 3px), 0 46%);

    --clip_borehole_container: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);


    --clip_unsupported:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 20px), calc(100% - 20px) calc(100%),  5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_cstationbox:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_starlink:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_starlink_adbox:  polygon(0 0, calc(100%) 0, 100% calc(100% - 10px),  calc(100% - 10px) calc(100%),   calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_button_dailyreward: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_csbox_addmodule_controls: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);


    --clip_csbox_sp_quarters: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_st_quarters: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_sp_cargo: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_st_cargo: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_pricehistory: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 71px), 0 calc(100% - 71px));

    --clip_user_corplogo: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 21px), 0 calc(100% - 21px));


    --clip_csbox_engineering_capacity: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 5px),calc(100% - 85px) calc(100% - 5px),calc(100% - 85px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);
    --clip_csbox_st_energy: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    ;

    --clip_csbox_hangar_ship: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 8px),calc(100% - 120px - 15px) calc(100% - 8px),calc(100% - 120px - 15px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);

    --clip_csbox_hangar_assembly_hoverbox: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_hangar_assembly_hoverbox_button: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_growbase_databox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 5px),calc(100% - 85px) calc(100% - 5px),calc(100% - 85px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);

    --clip_right_context:  polygon(5px 0, calc(100%) 0, 100% 100%,   calc(100%) calc(100% ),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%,0 80px, 5px 75px);

    --clip_production_slot: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_pvp_session_spacecraft: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_selecttutorial_titem:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_standardbox:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 100px), calc(100% - 5px) calc(100% - 100px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);
    --clip_standardstatus: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_standarminiature: polygon(0 0, calc(100% - 3px - 10px) 0, calc(100% - 3px) 10px, calc(100% - 3px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 3px 100%, 3px calc(11px), 0 calc(11px));

    --clip_alerttext: polygon(0 0, calc(100% + 10px) 0, calc(100% + 10px) calc(100%), 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));

    --clip_whitelink: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_controllink: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_rcbutton: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100%  2px, 100% 100%,0 100%,0 0);
    --clip_checkbox: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_flashback_icon: polygon(0 0, calc(100% - 3px ) 0, calc(100% - 3px) 0px, calc(100% - 3px) calc(100% - 6px), 100% calc(100% - 6px), 100% calc(100%) ,  calc(3px + 30px) calc(100%), calc(3px + 30px) calc(100% - 3px), calc(3px) calc(100% - 30px), 3px calc(11px), 0 calc(11px));

    --clip_qquestbox:  polygon(0 0, calc(100% - 10px) 0, calc(100% - 5px) 5px,  calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_destroyed_win:  polygon(0 0, calc(100% - 10px) 0, calc(100% - 5px) 5px,  calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_dailyreward:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);


    --clip_dailyreward_day:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_menu_premiumbox:  polygon(0 0, calc(100%) 0,  calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);

    --clip_menu_standardbox:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);

    --clip_waitingpayment:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, calc(100%) calc(100% - 10px), calc(100% - 5px) calc(100% - 10px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(56% + 5px), 0 56%);
    --clip_menu_funding_parms: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_zones_zone: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_menu_selectship_astronaut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_menu_newship_location:  polygon(0 0, calc(100% - 10px) 0, 100% 10px,  calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_desktop_basemodule:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_basemodule_astronaut:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_desktop_basemodule_astronaut_namelink: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_desktop_basemodule_weapon:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 10px),  calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_basemodule_attributes: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_desktopaction:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_antenna_bdfl:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 10px),  calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_new_satellite_borehole:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_new_satellite_borehole_item:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_desktop_adtronaut_dismisshire:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_desktop_boreholescene:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_csbox_cstationrotbox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 5px),calc(100% - 85px) calc(100% - 5px),calc(100% - 85px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);
    --clip_desktop_weponfitting_weapon:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 10px),  calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_cardinfo_card: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 18px - 14px),calc(100% - 14px) calc(100% - 18px), calc(100% - 65px) calc(100% - 18px), calc(100% - 65px - 14px) calc(100%), calc(65px + 14px) calc(100%), calc(65px) calc(100% - 18px), 14px calc(100% - 18px), 0 calc(100% - 18px - 14px), 0 14px);
    --subtext_color-background: rgb(16,15,33);
    --subtext_color: #bfbfbf;
}

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(40,40,40,1); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: white; 
}


@keyframes logoswitch{

    0% {background-position: 0px center,173px center;}
    95% {background-position: 0px center,173px center;}
    96% {background-position:  183px center,0px center;}
    99% {background-position:  183px center,0px center;}
    100% {background-position: 0px center,173px center;}

}


@keyframes highlited{0%{opacity:0.5;} 70%{opacity:1;}  100%{opacity:0.5;} }


@keyframes blink{0%{opacity:1;} 33%{opacity:0.4;} 66%{opacity:1;} 100%{opacity:0.3;} } 

@keyframes crt{ 0%{opacity:1;} 27.2%{opacity:1; } 27.5%{opacity:0.95;} 27.7%{opacity:1;} 28.2%{opacity:1; } 28.5%{opacity:0.95;} 28.7%{opacity:1;} 29.2%{opacity:1; } 29.5%{opacity:0.95;} 29.7%{opacity:1;} 77.2%{opacity:1; } 77.5%{opacity:0.4;} 77.9%{opacity:1;} 78.0%{opacity:0.6;} 78.3%{opacity:1;} 97%{opacity:1;} 97.2%{opacity:0.3;} 97.5%{opacity:1; transform: scale(1.1) skewY(0deg) skewX(0deg);} 98%{opacity:0; transform: scale(1.05) skewY(-1deg) skewX(0deg);} 98.2%{opacity:0; transform: scale(1) skewY(0deg) skewX(-1deg);} 100%{opacity:1;transform: scale(1) skewY(0deg) skewX(0deg);} }

@keyframes glitch{0%{opacity:1;} 80%{opacity:0.5; } 100%{opacity:0;  }}


@keyframes shadowing{
      0% {text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);} 
     15% {text-shadow:  0px 0px 0 rgba(255,131,64,.3), 0px 0px 0 rgba(126, 250, 255, .2);}
     85% {text-shadow:  0px 0px 0 rgba(255,131,64,.3), 0px 0px 0 rgba(126, 250, 255, .2);} 
    100% {text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);}
}

@keyframes showBox{0%{opacity:0; transform: perspective( 500px ) rotateY( 55deg );transform-origin: 0% 0%;}  100%{opacity:1; transform: perspective( 500px ) rotateY( 0deg );} }
    

@keyframes hash{
     0.000% {bottom: -100%} 
    
     2.000% {bottom: -100% }
     2.001% {bottom: -98% }
    
     4.000% {bottom: -98% }
     4.001% {bottom: -96% }
     
     6.000% {bottom: -96% }
     6.001% {bottom: -94% }
    
     8.000% {bottom: -94% }
     8.001% {bottom: -92% }
    
    10.000% {bottom: -92% }
    10.001% {bottom: -90% }
    
    
    
    12.000% {bottom: -90% }
    12.001% {bottom: -88% }
    
    14.000% {bottom: -88% }
    14.001% {bottom: -84% }
    
    16.000% {bottom: -84% }
    16.001% {bottom: -84% }
    
    18.000% {bottom: -84% }
    18.001% {bottom: -82% }
    
    20.000% {bottom: -82% }
    20.001% {bottom: -80% }
    
    
    
    22.000% {bottom: -80% }
    22.001% {bottom: -78% }
    
    24.000% {bottom: -78% }
    24.001% {bottom: -76% }
    
    26.000% {bottom: -76% }
    26.001% {bottom: -74% }
    
    28.000% {bottom: -74% }
    28.001% {bottom: -72% }
    
    30.000% {bottom: -72% }
    30.001% {bottom: -70% }
    
    
    
    32.000% {bottom: -70% }
    32.001% {bottom: -68% }
    
    34.000% {bottom: -68% }
    34.001% {bottom: -66% }
    
    36.000% {bottom: -66% }
    36.001% {bottom: -64% }
    
    38.000% {bottom: -64% }
    38.001% {bottom: -62% }
    
    40.000% {bottom: -62% }
    40.001% {bottom: -60% }
    
    
    
    42.000% {bottom: -60% }
    42.001% {bottom: -58% }
    
    44.000% {bottom: -58% }
    44.001% {bottom: -56% }
    
    46.000% {bottom: -56% }
    46.001% {bottom: -54% }
    
    48.000% {bottom: -54% }
    48.001% {bottom: -52% }
    
    50.000% {bottom: -52% }
    50.001% {bottom: -50% }
    
    
    
    52.000% {bottom: -50% }
    52.001% {bottom: -48% }
    
    54.000% {bottom: -48% }
    54.001% {bottom: -44% }
    
    56.000% {bottom: -44% }
    56.001% {bottom: -44% }
    
    58.000% {bottom: -44% }
    58.001% {bottom: -42% }
    
    60.000% {bottom: -42% }
    60.001% {bottom: -40% }
    
    
    62.000% {bottom: -40% }
    62.001% {bottom: -38% }
    
    64.000% {bottom: -38% }
    64.001% {bottom: -36% }
    
    66.000% {bottom: -36% }
    66.001% {bottom: -34% }
    
    68.000% {bottom: -34% }
    68.001% {bottom: -32% }
    
    70.000% {bottom: -32% }
    70.001% {bottom: -30% }
    
    
    72.000% {bottom: -30% }
    72.001% {bottom: -28% }

    74.000% {bottom: -28% }
    74.001% {bottom: -26% }
    
    76.000% {bottom: -26% }
    76.001% {bottom: -22% }
    
    78.000% {bottom: -22% }
    78.001% {bottom: -22% }
    
    80.000% {bottom: -22% }
    80.001% {bottom: -20% }
    
    
    82.000% {bottom: -20% }
    82.001% {bottom: -18% }
    
    84.000% {bottom: -18% }
    84.001% {bottom: -16% }
    
    86.000% {bottom: -16% }
    86.001% {bottom: -14% }
    
    88.000% {bottom: -14% }
    88.001% {bottom: -12% }
    
    90.000% {bottom: -12% }
    90.001% {bottom: -10% }
    
    
    
    
    92.000% {bottom: -10% }
    92.001% {bottom:  -8% }
    
    94.000% {bottom:  -8% }
    94.001% {bottom:  -6% }
    
    96.000% {bottom:  -6% }
    96.001% {bottom:  -4% }
    
    98.000% {bottom:  -4% }
    98.001% {bottom:  -2% }
    
    99.001% {bottom:  -2% }
   100.000% {bottom:  -0% }
    
}



@keyframes hash10 {
     0.000% {bottom:  0px} 
  
    10.000% {bottom: 0px }
    10.001% {bottom: -40px }
   
    20.000% {bottom: -40px }
    20.001% {bottom: -80px }
    
    30.000% {bottom: -80px }
    30.001% {bottom: -100px }
    
    50.000% {bottom: -100px }
    50.001% {bottom: -130px }
    
    70.000% {bottom: -130px }
    70.001% {bottom: -150px }
  
    90.000% {bottom: -150px }
    90.001% {bottom: -180px}
   
    99.001% {bottom:  -180px }
   100.000% {bottom:  -200px }
}


@keyframes slowMovingRightZoomin {
   0.000% {
      background-position:  left;
      background-size: 130%;
   } 
    
   100.000% {
      background-position:  right;
      background-size: 150%;
   }
}

@keyframes slowMovingLeftZoomin {
   0% {
      background-position:  right;
      background-size: 130%;
   } 
    
   100% {
      background-position:  left;
      background-size: 150%;
   }
}

@keyframes slowMovingRightZoomout {
   0% {
      background-position:  left;
      background-size: 150%;
   } 
    
   100% {
      background-position:  right;
      background-size: 130%;
   }
}

@keyframes slowMovingLeftZoomout {
   0% {
      background-position:  right;
      background-size: 150%;
   } 
    
   100% {
      background-position:  left;
      background-size: 130%;
   }
}
@keyframes blink { 0% { opacity: 1; } 33% { opacity: 0.4; } 66% { opacity: 1; } 100% { opacity: 0.3; } }
@keyframes glitch{0%{opacity:1;} 80%{opacity:0.5; } 100%{opacity:0;height: 0%;  }}

@keyframes font_color_glitch{
    0%{
        text-shadow: -5px 0px 0 rgba(255,131,64,.13), 5px 0px 0 rgba(126, 250, 255, .12);
    }
    30% {
        text-shadow: -1px 0px 0 rgba(255,131,64,.4), 2px 0px 0 rgba(126, 250, 255, .4);
    }
    60% {
        text-shadow: -4px 0px 0 rgba(255,131,64,.1), 4px 0px 0 rgba(126, 250, 255, .1);
    }
    100% {
        text-shadow: -2px 0px 0 rgba(255,131,64,.25), 2px 0px 0 rgba(126, 250, 255, .25);
    }
}

@keyframes drop-shadow_glitch{
    0%{
        filter: drop-shadow(-15px 0px 0 rgba(255,131,64,.13)) drop-shadow(15px 0px 0 rgba(126, 250, 255, .12));
    }
    60% {
        filter: drop-shadow(-1px 0px 0 rgba(255,131,64,.4)) drop-shadow(2px 0px 0 rgba(126, 250, 255, .4));
    }
    90% {
        filter: drop-shadow(-6px 0px 0 rgba(255,131,64,.1)) drop-shadow(6px 0px 0 rgba(126, 250, 255, .1));
    }
    100% {
        filter: drop-shadow(-0px 0px 0 rgba(255,131,64,.25)) drop-shadow(0px 0px 0 rgba(126, 250, 255, .25));
    }
}
.crt {
animation: crt 10000ms linear infinite;
}

._glitch_effect {
  display: block !important;
  position: absolute !important;
  min-height: 60px !important;
  background:rgba(0,0,0,0) url(./effects/glitch1.gif) center left no-repeat !important;
  background-size: cover !important;
  animation:glitch 50ms linear 1 !important;
  animation-fill-mode: forwards !important;
  
}
._glitch_effect:before,
._glitch_effect:after {
  display:none !important;
}

#warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }


html {

    background-color: black;
    margin: 0px;
    padding: 0px;
    
    width: 100%;
    min-height: 100%;
    background-repeat: repeat,repeat;
    background-image: url('https://cdn.source.outspacegame.com/img/page_bckgr.jpg');
}

body {

    font-family: var(--fontFaimly_text);
    padding: 0px;
    margin: 0px;
    background-size: cover;
    background-position: top right;
    min-width: 390px;
    background-repeat: no-repeat;
    color: var(--font_color_basic);
}

.bg-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-repeat: repeat;
    background-size: auto;
    will-change: background-position;
    z-index: 0;
    pointer-events: none;
  }
  #layer1 {
    background-image: url('https://cdn.source.outspacegame.com/img/stars_bckgr-layer2.png');
    z-index: 1;
  }
  #layer2 {
    background-image: url('https://cdn.source.outspacegame.com/img/stars_bckgr-layer1.png');
    z-index: 2;
  }


.hashbox {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

.hashbox .hash {
    position: absolute;
    
    
    text-transform: uppercase;
    color: rgba(255,255,255,0.15);
    letter-spacing: 2px;


    font-size: 13px;
    animation: hash10 3000ms cubic-bezier(0.05, 1.03, 0.65, 0.61) infinite;

    line-height: 16px;
    z-index: -10000;
}

#wrapper {

   padding: 0px;
   margin: 0px;
   height: 100%;
}

#warning-message {
    position: absolute;
    top: calc(50% - 85px);
    left: 10%;
    color: black;
    text-align: center;
    height: 100px;
    right: 10%;
    background-color: white;
    box-sizing: border-box;
    padding: 15px 15px 120px;

    font-size: 20px;
    background-size: 50px;
    background-image: url('turn.png');
    background-position: center 65px;
    background-repeat: no-repeat;
    line-height: 15px;
}

.format-exc {
    display: inline-block;
    padding-left: 20px;
    background: url(./ico/exc_16.png) center left no-repeat !important;
    background-size: 16px;
    line-height: 16px;

}

.format-mor {
    display: inline-block;
    padding-right: 20px;
    background: url(./ico/morale_16.png) center right no-repeat !important;
    background-size: 16px;
    line-height: 16px;

}

a {
text-decoration: underline;
color: var(--font_color_link);
animation: shadowing 5000ms linear infinite;
}

a:hover {
text-decoration: none;
color: var(--font_color_link_hovered);
animation: blink 100ms linear 2;
}

a img {
border: 0px;
}
/*
#telo{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
*/
#telo_gl{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    
    -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}

.itemdetail #telo_gl {
    /*background-color: black;*/
}

#telo_gl canvas{
    position: absolute;
    top: 0px;
    left: 0px;
}

#telo_gl #RFSinfobox{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    color: #bfbfbf;
    z-index: 10000;
    padding: 15px;
}


#telo_gl #RFSinfobox:before {
    
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(16,15,33);
    z-index: -1;
}

#telo_gl #RFSinfobox.left.top:after {
    content: "";
    display: block;
    
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: unset;
    position: absolute;
    bottom: 0px;
    right: -5px;
    border-left: 5px solid rgb(16,15,33);;
}

#telo_gl #RFSinfobox.left.bottom:after {
    content: "";
    display: block;
    
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: unset;
    position: absolute;
    top: 0px;
    right: -5px;
    border-left: 5px solid rgb(16,15,33);;
}

#telo_gl #RFSinfobox.right.top:after {
    content: "";
    display: block;
    
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid rgb(16,15,33);;
    position: absolute;
    bottom: 0px;
    left: -5px;
    border-left: unset;
}

#telo_gl #RFSinfobox.right.bottom:after {
    content: "";
    display: block;
    
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid rgb(16,15,33);;
    position: absolute;
    top: 0px;
    left: -5px;
    border-left: unset;
}

#telo_gl #RFSinfobox .title {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: var(--fontFaimly_button);
}

#telo_gl #RFSinfobox .html {
    font-size: 12px;
}



#telo_gl #RFSinfobox .html table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#telo_gl #RFSinfobox .html table th {
    font-weight: normal;
}

#telo_gl #RFSinfobox .html table th.nadpis {
    font-weight: bold;
    font-size: 14px;

}
#telo_gl #RFSinfobox .html table th {
    text-align: left;
}

#telo_gl #RFSinfobox .html table td {
    text-align: right;
}


#telo_gl #RFSinfobox .html table th,
#telo_gl #RFSinfobox .html table td{
    border-bottom: 1px solid rgba(100,100,100,0.1);
    padding: 4px 4px;
    
}

#telo_gl #RFSinfobox .html table td{
    width: 1%;
    white-space: nowrap;
}


#telo_gl #databox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    bottom: 0px;
    font-size: 14px;
    text-shadow: var(--shadow_textfull);
    background-image: linear-gradient(90deg, #000000a6 0%, #0000007a 60%, transparent 100%);
}

@media (max-width: 520px) { 
    #telo_gl #databox {
        width: 100%;
     }
}

#telo_gl #databox .benchmark_scroller{
    position: absolute;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x :hidden; 
    overflow-y :scroll; 
    direction:rtl; 
}

.itemdetail #telo_gl.entity_type_weapon #databox:before {
    
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(137deg, #00000030 0%, transparent 67%), linear-gradient(79deg, #00000021 0%, transparent 68%);
}

#telo_gl #databox .pricing {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 15px 10px;
    box-sizing: border-box;

    width: 290px;
    color: black;
    font-size: 22px;
    color: white;

}

#telo_gl #databox .pricing .price {
    position: relative;
    margin-left: 90px;
    padding: 0 0 10px;
}

#telo_gl #databox .pricing .price .mprbef {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -140px;
    text-align: right;
    width: 90px;
    font-size: 10px;
    line-height: 33px;
}

#telo_gl #databox .pricing .morale {
    position: relative;
    margin-left: 140px;
    display: none;
}


.inline_weaponslots {
}
.inline_weaponslots .li,
.inline_weaponslots .me,
.inline_weaponslots .he {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

.inline_weaponslots .li {
    background-image: url('../../img/ico/weapon_light-32.png');
}
.inline_weaponslots .me {
    background-image: url('../../img/ico/weapon_medium-32.png');
}
.inline_weaponslots .he {
    background-image: url('../../img/ico/weapon_heavy-32.png');
}

.inline_weaponslots .sub {
    display: none;

}

.inline_weaponslots > span:hover .sub {
    display: block;
    position: absolute;
    background-color: black;
    color: var(--hud_invalid_color);
    padding: 4px 6px;
    min-width: 80px; 
    font-size: 11px;
    z-index: 100;
    text-align: left;
    top: -1px;
    right: calc(50% + 10px);
    line-height: 13px;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}

.inline_weaponslots > span:hover .sub:before {
    content: "";
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid black;
    position: absolute;
    top: 6px;
    right: -12px;


}



.inline_accuracy {
}
.inline_accuracy .sr,
.inline_accuracy .mr,
.inline_accuracy .lr {
    display: block;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
}

.inline_accuracy .ssr.value,
.inline_accuracy .smr.value,
.inline_accuracy .slr.value {
    float: left;
    display: block;
    text-align: right;
    box-sizing: border-box;
    width: 59.5%;
}

.inline_accuracy .ssr.bonus,
.inline_accuracy .smr.bonus,
.inline_accuracy .slr.bonus {
    position: relative;
    float: right;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
}

.inline_accuracy .ssr.bonus:before,
.inline_accuracy .smr.bonus:before,
.inline_accuracy .slr.bonus:before {
    content: '+';
    position: absolute;
    top: 0px;
    left: -20px;
    width: 20px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 20px;
}

.inline_accuracy .sr {
    background-image: url('../../img/ico/accuracy_short-32.png');
}
.inline_accuracy .mr {
    background-image: url('../../img/ico/acurracy_medium-32.png');
}
.inline_accuracy .lr {
    background-image: url('../../img/ico/accuracy_long-32.png');
}

.inline_range {
}
.inline_range .sr,
.inline_range .mr,
.inline_range .lr {
    display: block;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
}

.inline_range .value.from,
.inline_range .value.from,
.inline_range .value.from {
    float: left;
    display: block;
    text-align: right;
    box-sizing: border-box;
    width: 49.5%;
}

.inline_range .value.to,
.inline_range .value.to,
.inline_range .value.to {
    position: relative;
    float: right;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
}

.inline_range .value.to:before,
.inline_range .value.to:before,
.inline_range .value.to:before {
    content: '';
    position: absolute;
    top: 0px;
    left: -17.5px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    background-image: url('../../img/ico/range_between-32.png');
}

.inline_range .sr {
    background-image: url('../../img/ico/attack_short-32.png');
}
.inline_range .mr {
    background-image: url('../../img/ico/attack_medium-32.png');
}
.inline_range .lr {
    background-image: url('../../img/ico/attack_long-32.png');
}

.inline_attack {
}
.inline_attack .sr,
.inline_attack .mr,
.inline_attack .lr {
    display: block;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
}

.inline_attack .ssr.value,
.inline_attack .smr.value,
.inline_attack .slr.value {
    float: left;
    display: block;
    text-align: right;
    box-sizing: border-box;
    width: 49.5%;
}

.inline_attack .ssr.bonus,
.inline_attack .smr.bonus,
.inline_attack .slr.bonus {
    position: relative;
    float: right;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
}

.inline_attack .ssr.bonus:before,
.inline_attack .smr.bonus:before,
.inline_attack .slr.bonus:before {
    content: '+';
    position: absolute;
    top: 0px;
    left: -20px;
    width: 20px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 20px;
}

.inline_attack .sr {
    background-image: url('../../img/ico/attack_short-32.png');
}
.inline_attack .mr {
    background-image: url('../../img/ico/attack_medium-32.png');
}
.inline_attack .lr {
    background-image: url('../../img/ico/attack_long-32.png');
}




.inline_attacktype {
}
.inline_attacktype .beam,
.inline_attacktype .kinetic,
.inline_attacktype .plasma {
    display: inline-block;
    width: 58px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-transform: uppercase;
   
}

.inline_attacktype .beam {
    background-image: url('../../img/ico/damage_beam-32.png');
}
.inline_attacktype .kinetic {
    background-image: url('../../img/ico/damage_kinetic-32.png');
}
.inline_attacktype .plasma {
    background-image: url('../../img/ico/damage_plasma-32.png');
}


.inline_defense {
}
.inline_defense .beam,
.inline_defense .kinetic,
.inline_defense .plasma {
    display: inline-block;
    width: 54px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
    font-size: 14px;

}

.inline_defense .beam {
    background-image: url('../../img/ico/damage_beam-32.png');
}
.inline_defense .kinetic {
    background-image: url('../../img/ico/damage_kinetic-32.png');
}
.inline_defense .plasma {
    background-image: url('../../img/ico/damage_plasma-32.png');
}


.inline_stations {
}
.inline_stations .tac,
.inline_stations .eng,
.inline_stations .sci {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
    position: relative;
    padding: 0px;
    margin: 0px 1px;
}



.inline_stations .tac {
    background-image: url('../../img/ico/stations_t.png');
}
.inline_stations .eng {
    background-image: url('../../img/ico/stations_e.png');
}
.inline_stations .sci {
    background-image: url('../../img/ico/stations_s.png');
}

.inline_stations .tac .qty,
.inline_stations .eng .qty,
.inline_stations .sci .qty {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: var(--fontFaimly_button);

}

.inline_stations .tac .min,
.inline_stations .eng .min,
.inline_stations .sci .min {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    line-height: 15px;
    color: white;
    font-size: 10px;
    margin: 0px 0px;
    padding: 0px;
    font-family: var(--fontFaimly_button);

}

.inline_stations .tac .min{
    background-color: rgb(159,17,14);
}
.inline_stations .eng .min{
    background-color: rgb(37,96,128);
}
.inline_stations .sci .min{
    background-color: rgb(61,137,127);
}


.inline_stations .tac .qty{
    color: rgb(159,17,14);
}
.inline_stations .eng .qty{
    color: rgb(37,96,128);
}
.inline_stations .sci .qty{
    color: rgb(61,137,127);
}



.inline_tes {
    width: 100%;
    display: block;
    
    white-space: nowrap;
}

.inline_tes .tactical,
.inline_tes .engineer,
.inline_tes .science  {
    width: auto;
    margin: 0px 1px;

}

.title .tactical,
.title .engineer,
.title .science {
    transform: translateY(-3px);
}

.tactical,
.engineer,
.science {
    display: inline-block;
    position: relative;
    height: 22px;
    min-width: 33px;
    color: silver;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    padding: 0px 10px;
    margin: 0px 1px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    z-index: 1;
    white-space: nowrap;
}



.tactical:before,
.engineer:before,
.science:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #4b4a4a;
    z-index: -1;
    background-image: linear-gradient(0deg, rgb(110 110 110 / 60%) 0%, rgba(0, 0, 0, 0) 100%);
}


.tactical:before{
    
    clip-path: var(--clip_t);
}
.engineer:before{
    
    clip-path: var(--clip_e);
}
.science:before{
    
    clip-path: var(--clip_s);
}

.tactical:not(.grayed):before{
    background-color:var(--color-t); 
}
.engineer:not(.grayed):before{
    background-color:var(--color-e);
}
.science:not(.grayed):before{
    background-color:var(--color-s);
}


#telo_gl #databox .manufacturer {
    position: absolute;
    top: 70px;
    left: 15px;
}

#telo_gl #databox .manufacturer img {
    height: 36px;
}

#telo_gl #databox .benchmark {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    color: white;
    box-sizing: border-box;
}

#telo_gl #databox .benchmark {
    padding: 0px 0px 50vh 0px;
    border-spacing: 0px;
    position: absolute;
    top: 0px;
    left: 32px;
    direction:ltr;
    
}

#telo_gl #databox .benchmark th {
    text-align: right;
    width: 130px;
    padding: 0px 10px 0px 0px;
    color: white;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 14px;
    vertical-align: top;
    font-weight: normal;
}

#telo_gl #databox .wikilink {

    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 11px;
    text-shadow: none;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-decoration: none;
}

#telo_gl #databox .wikilink:hover {
    animation: blink 100ms linear 2;

}


#telo_gl #databox table.materials{
    width: calc(100% - 10px);
    border-spacing:0px;
    border-collapse:separate;
    font-size: 10px;
    margin-right: 10px;
}


#telo_gl #databox table.materials td{
    color: var(--hud_tablevaluecolor);
    text-align: right;
    padding: 2px 5px 2px 0px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%), linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%), linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%);
    font-size: 13px;
    height: 20px;
    vertical-align: middle;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;
}


#telo_gl #databox table.materials th{
    color: white;
    text-align: right;
    padding: 2px 5px 2px 0px;
    height: 20px;
    width: 1%;

}


#telo_gl #databox .benchmark td {
    
    color: rgb(190 218 251);
    padding: 0px 0px 4px 0px;
    text-transform: none;
   
    vertical-align: top;
    min-height: 30px;
    font-size: 16px;
}

#telo_gl #databox .benchmark td .legend {
    display: block;
    color: #aba7a7;
    
    font-size: 11px;
}

#telo_gl #databox .benchmark td .thypercorporation  {
    max-height: 30px;
    max-width: 100%;
}



#telo_gl #databox .benchmark td .contenttable {
    width: 320px;
}

#telo_gl #databox .benchmark .nm_name td {
    font-size: 28px;
    padding: 10px 0px 10px 0px;
}

#telo_gl #databox .benchmark .nm_description td {
    
    font-size: 16px;
    padding: 0px 0px 20px 0px;
    line-height: 22px;
    
}

#telo_gl #databox .benchmark .target_type .arttyp{
    display: inline-block;
    background-color: #4e4e4e;
    color: white;
    font-size: 11px;
    padding: 2px 24px 2px 5px;
    margin: 2px 2px;
    font-family: var(--fontFaimly_button);
    border-radius: 4px;
    position: relative;
    white-space: nowrap;
    text-shadow: none;
}

#telo_gl #databox .benchmark .target_type .arttyp .infosight {
    display: inline;
    position: relative;
    width: 12px;
    height: 12px;
    top: -1px;
    right: -4px;
}

#telo_gl #databox .benchmark .target_type .arttyp .infosight:before {
    content: 'i';
    position: absolute;
    left: 3px;
    width: 10px;
    top: 2px;
    height: 10px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    color: gray;
    font-size: 9px;


    text-shadow: none;

}

#telo_gl #databox .benchmark .target_type .arttyp .infosight:hover .html {
    display: block;
    animation: blink 100ms linear 2 alternate;
}

#telo_gl #databox .benchmark .target_type .arttyp .infosight .html {
    display: none;
    position: absolute;
    right: -19px;
    width: 175px;
    top: 20px;
    background-color: rgba(10,10,10,1);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 100;
    white-space: normal;
    text-align: right;
}

#telo_gl #databox .benchmark .target_type .arttyp .infosight .html:before {
    content: "";
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 0px;
    border-bottom: 10px solid rgba(10,10,10,1);
}



.header {
    position: relative;
    height: 60px;
    background: rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 375px;
    background: rgba(5,5,5,1);
    margin: 0px auto 0px auto
} 





.media {
    width: 100%;
    margin: 0px auto 0px;
    padding: 30px 0px 30px;
    box-sizing: border-box;
    position: relative;
    background-image: url(aa_space.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,center;

}

h1 {
    font-family: var(--fontFaimly_header);
    display: block;
  
    box-sizing: border-box;
    text-decoration: none;
    font-size: 32px;
    font-weight: normal;
    padding: 20px 0px 10px 0px;
    text-align: center;
    clear: both;
    margin: 10px 0px 5px 0px;
    
}

h1 a {
    text-decoration: none;
}


h2 {
    font-family: var(--fontFaimly_header);
    display: block;
   
    box-sizing: border-box;
    text-decoration: none;
    font-size: 27px;
    font-weight: normal;
    padding: 20px 0px 0px;
    text-align: center;
    text-decoration: none;
    clear: both;
}

h2 a {
    text-decoration: none;
}

h3 {
    font-family: var(--fontFaimly_header);
    display: block;
   
    box-sizing: border-box;
    text-decoration: none;
    font-size: 21px;
    line-height: 26px;
    font-weight: normal; 
    padding: 10px 0px 8px;
    text-align: left;
    text-decoration: none;
    border-bottom: 1px solid rgba(139,172,211,0.1);
    clear: both;
}

h3 a {
    text-decoration: none;
}

.header .logo {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 350px;
    max-width: 350px;
    transform: translateY(-50%);
    height: 34px;
    background-size: contain, 180px;
    background-repeat: no-repeat;
    background-position: left center,173px center;
    opacity: 0.5;
    animation: logoswitch 25000ms ease-in-out 1;
}

@media (max-width: 520px) { 
    .header .logo  {
          width: 150px;
    }
}

.header .menu {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 60px;
    z-index: 99999;
}

.header .menu ul {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

.header .menu ul li {
    display: block;
    float: left;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px;
    position: relative;
    color: rgba(255,255,255,0.5);
}

.header .menu ul li a {
    display: block;
    text-decoration: none;
    color: rgba(255,255,255,.9);
    font-size: 14px;
    transition: text-shadow 1s ease; 
    height: 60px;
    padding: 0px 10px 0px 5px;
    line-height: 60px;
    margin: 0px;
    text-align: center;
    opacity: 0.9;
    cursor: pointer;
    text-shadow: -1px 0px 0 rgba(255,131,64,.3), 1px 0px 0 rgba(126, 250, 255, .2);
}


.header .menu ul li a.play {
    height: 30px;
    line-height: 30px;
    margin-top: 16px;
    background-color: rgb(232,250,17);
    padding: 0px 10px 0px 10px;
    margin-right: 5px;
    color: black;
}

.header menu ul li a.play:hover {
    color: black;
}

.header .menu ul li a:hover,.header .menu ul li a:hover:focus {
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2;
    text-shadow: -5px 0px 0 rgba(255,131,64,.3), 5px 0px 0 rgba(126, 250, 255, .2);
}

.header .menu ul li.socials a  {
    padding-left: 5px;
}


.header .menu ul li.socials a img {
    margin-top: 0px;
    padding-top: 20px;
    max-height: 17px;
}


.header .menu ul li ul {
    display: none;
    position: absolute;
    top: 50px;
    right: 0px;
    background-color: rgba(0,0,0,0.65);
    padding: 10px 10px;
}


@media (max-width: 520px) { 
    .header .menu ul li ul {
          top: 40px;
          padding: 0px 0px;
    }
}

.dottedbckg {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 30px 30px;
}



.header .menu ul li:hover ul,
.header .menu ul li:focus ul {
display: block;

}




.header .menu ul li ul li {
display: block;
}



.header .menu ul li ul li a:before {
  content: "";
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-left: 5px solid rgba(255,255,255,0.2);
  position: absolute;
  right: 11px;
  top: 14px;
}

.header .menu ul li ul li a {
position: relative;
    display: block;
    height: 35px;
    text-align: right;
    line-height: 35px;
    font-weight: normal;
    color: white;
    padding: 0px 5px;
    padding: 0px 27px 0px 15px;
    overflow: hidden;
    width: 150px;
    font-size: 17px;
}





.header .menu ul li ul li a:hover:before {
   border-left: 5px solid rgba(255,255,255,0.6);
}





.menu_header {
padding: 25px 125px;
}

.menu_header ul {
display: block;
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;
width: 33%;
}

.menu_header ul li {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}

.menu_header a {
color: white;
text-decoration: underline;
}

.menu_header a:hover {
color: white;
text-decoration: none;
}









.cleaner {
clear: both;
font-size: 1px;
line-height: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}


.footer {
    position: relative;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

.footer:before {
    content: '';
    display: block;
    position: absolute;
    max-width: 1100px;
    top: 0px;
    left: 50%;
    height: 10px;
    transform: translateX(-50%);
    width: 100%;
    background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%,rgba(155,155,155,0.5) 40%,rgba(155,155,155,0.5) 60%, rgba(0,0,0,0) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0px 2px;
}

.footer .footerlinks {
    position: absolute;
    right: 10px;
    text-align: right;
    font-size: 10px;
    line-height: 11px;
    color: rgba(255,255,255,0.5);
    bottom: 5px;
}

.footer .footerlogo {
    position: relative;
    height: 17px;
    opacity: .5;
    margin: 5px;
}

.footer .footerlogob {
    position: relative;
    height: 25px;
    opacity: .5;
    margin: 5px;
    
}

.footer .footerage {
    position: absolute;
    right: 26px;
    bottom: 11px;
    width: 41px;
    height: 23px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .5;
    transition: opacity 1s;
    background-image: url('18.png');
}

.footer .footerlogo:hover {
    opacity: 1;
}

.subscriptor {
    font-size: 21px;
    margin: 0px auto;
    font-weight: normal;
    text-align: center;

}


.field {
    font-size: 16px;
    display: block;
    position: relative;
    max-width: 400px;
    padding: 20px 20px 20px 20px;
    background-color: rgba(0,0,0,0.65);
    box-sizing: border-box;
        width: 90%;
    text-align: center;
    margin: 0px auto 100px;

} 

.field.centered {
    margin-top: calc(30% - 30px);

} 

.field.infospan {
    margin-top: 200px;
}

.field:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.field:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  



.field .text {
    font-size: 27px;

    margin: 0px;
    padding:  0px;
    font-weight: normal;
    color: rgba(255,255,255,0.9);


}
.field .text .lighted {
    color: rgba(255,255,255,0.9);

    text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
    animation: shadowing 10000ms linear infinite;

}
.field .text .myfleet {
  font-size: 24px;
  position: relative;
  margin: 0px;
  padding: 5px 0px;
  font-weight: normal;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 40px rgb(0,255,255);
  text-decoration: none;
}
             


.field .text small {
  font-size: 20px;
  text-transform: uppercase;
  color: rgb(232,250,17);
  display: block;
  padding-top: 8px;
}

.field .text small a {
  color: white; 
}

.field  .text small a:hover {
  text-decoration: none;
}

.field .text small a {     
    display: inline-block;
    color: black;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
    padding: 5px 14px;
    font-size: 20px;

    font-weight: normal;
    margin: 15px auto 5px;
} 


.field .text small a::first-letter { 
    color: rgb(4,193,193);
}

.field  .text small a:hover {     
    color: black;
    background-color: rgb(232,250,17);
    animation: blink 100ms linear 2;
} 




.field .text small.pos {
    color: white;

}


.field .small_info {
    color: rgba(255,255,255,.3);
    line-height: 15px;
    display: block;
    font-size: 12px;
}

.field .rightinputstable {
  margin: 5px auto;
}



.field .newslerr {
  font-size: 16px;
  font-weight: bold;
  color: rgb(200,0,0);
}
      
.field .newslgreen {
  font-size: 16px;
  font-weight: bold;
  color: rgb(0,200,0);
}




.subscriptor .avatar {
    display: block;
    text-decoration: none;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    width: 200px;
    margin: 20px auto 0px auto;
    position: relative;
}

.subscriptor .avatar:before {
 content: "";
 position: absolute;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 border: 1px solid rgba(255,255,255,0.1);
}



.subscriptor .avatar span {
    display: block;
    position: absolute;
    top: 85px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(232,250,17);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: black;

    text-transform: uppercase;
    font-size: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
      font-weight: normal;
        text-decoration: none;
          text-align: center;
  
}




.members .add {
    display: block;
    float: left;
    margin: 7px;
    cursor: pointer;
    padding: 0px;
    width: 120px;
    height: 190px;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: opacity 0.2s linear;
    color: black;
    font-weight: normal;

    text-decoration: none;
    font-size: 32px;
    line-height: 190px;
    position: relative;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    
}





.members .add:hover {
  
  background: white;

}  

.members .user {
  background: rgba(0,0,0,0.4) url('stations_plus.png') center no-repeat;
  padding: 10px;
  width: 84px;
  height: 84px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  padding: 0px;
  font-size: 13px;
  background-size: cover; 
  position: relative;
   
}

.members .user:after {
 content: "";
 position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
 border: 3px solid rgba(0,255,255,1);
  filter: blur(3px);

}



.members .addtable .user .namebox {
  position: absolute;
  bottom: -33px;
  color: gold;
  font-size: 12px;
  height: 27px;
  line-height: 12px;
  padding: 0px;
  width: 100%;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: normal;
  text-align: center;
}

.members .addtable .user .namebox span.mail {

  color: white;
  font-size: 8px;

}

.members .addtable .user:hover .namebox {
  opacity: 1;
}

.members h5 {
position: relative;
    color: yellow;
    padding: 15px 5px;
    box-sizing: border-box;
    text-transform: uppercase;

    text-decoration: none;
    text-transform: none;
    font-size: 34px;
    font-weight: normal;
    text-align: center;
    clear: both;
    margin: 0px;
    text-transform: uppercase;    
}

.subscriptor .title .small {
  font-size: 14px;
  color: silver;
} 

.reward {
  height: 400px;
  margin: 0px auto;
  width: 322px;
}

.loginbox {
  position: absolute;
  top: 60px;
  right: 110px;
  width: 322px;
  padding: 20px 10px 20px 10px !important;
  background-color: rgba(0,0,0,0.65);
}

.loginbox .title {

      opacity: 0.9;
  color: white;
  padding: 5px 0px;
}

.loginbox input {
  color: black;
  height: 27px;
}

.loginbox input[type="text"], .loginbox input[type="password"] {
  width: 113px;
}

.loginbox input[type="submit"] {
  cursor: pointer;
}

input {
    font-size: 14px;
    padding: 3px 6px;
    min-height: 20px;
    width: 80px;
    color: rgb(0,255,200);
    text-align: center;
    background-color: rgba(0,50,50,1);
    
    border: 1px solid gray;
    
}

select {
    font-size: 14px;
    padding: 3px 6px;
    min-height: 20px;
    font-weight: normal;
    color: rgb(0,255,200);
    text-align: center;
    background-color: rgba(0,50,50,1);

    text-decoration: none;
    text-transform: uppercase;
    
}

input.file {
  padding: 0px;
  height: initial;
  text-align: left;
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
  width: 252px;

  font-size: 15px;
  font-weight: normal;
  color: rgba(255,255,255,0.9);
  text-shadow: 0px 0px 40px rgba(255,255,255,1);
}

.imageedit {
display: block;
    position: absolute;
    top: 83px;
    left: 0px;
    margin: 0px auto;
    width: 400px;
    padding: 20px 20px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 50, 75, 0.95);
    color: white;
    text-align: left;
    z-index: 100;
    box-sizing: border-box;
}

input[type="text"],input[type="password"],input[type="email"] {
  
}

textarea {
    text-decoration: none;
    width: 100%;
    min-height: 120px;
    padding: 5px;
    max-width: 100%;
    font-size: 16px;

    font-weight: bold;
    color: black;
    text-align: center;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 30px 30px;
    border: none;
    box-sizing: border-box;

}

input[type="submit"],button {
    position: relative;
    text-align: center;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    color: white;
    padding: 0px 10px;
    font-size: 12px;

    font-weight: normal;
    text-transform: none;
    box-sizing: border-box;
    line-height: 30px;
    text-transform: uppercase;
    width: 120px;
    margin: 0px auto;
    border: 1px solid white;
}

button:hover{
animation:blink 100ms linear 2 alternate;
color: black;
background-color: rgb(255,255,255);
box-shadow: none;
}

.highlited {
    animation:highlited 500ms linear infinite;
}


input[type="submit"]:hover, button:hover {
        animation: blink 100ms linear 2 alternate; 
}

input[type="submit"].gray,button.gray {
    color:  rgb(200,200,200);
    background-color: rgba(55,55,55,1);
}




.navline a:hover {
background: rgba(0,0,0,0.2) url(arrow-88-16.png) left center no-repeat;
color: rgba(255,255,255,1);
}



.email input[type="email"] {
  width: 250px;
}

.sendinv {
  margin-top: 15px;
}


.loginer {
  position: absolute;
  top: calc(50% - 90px);
  width: 100%;
}



.images .mainimage {
  position: relative;
  text-align: center;
  height: 350px;
  overflow: hidden;
  background-color: black;
}

.images .mainimage #imgloader {
  position: absolute;
  top: 132px;
  height: 30px;
  left: calc(50% - 15px);
  width: 30px;
  display: none;
  opacity: 0.5;
}

.images .mainimage a {
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.images .mainimage a img {
  position: absolute;
  bottom: 0px;
  left: calc(50% - 600px);
}


.images .mainimage a img {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  min-width: 1200px;
}


.images .gallery {
  display: block;
  position: absolute;
  bottom: 60px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  width: 100%;
  height: 20px;      
}

.images .gallery li {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0px;
  padding: 0px 3px;
  transition: transform 0.1s linear, opacity 0.3s linear;
  opacity: 0.7;
  cursor: pointer;
  background: url(circle-dashed-4-16.png) center no-repeat;
}

.images .gallery li:hover {
  transform: rotate(60deg);
  opacity: 1;
}

.images .gallery li.clicked{
  background: url(circle-outline-16.png) center no-repeat;
}




.images .name {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 55px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  width: 100%;
  
}

.images .name .textboxa {
  display: block;
  position: relative;
  margin-top: 7px;
  height: 40px;
  padding: 0px 10px;
  text-align: left;
  
}

.images .name .textboxa h1 {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 40px;
  letter-spacing: -1px;
  line-height: 40px;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 40px rgb(0,255,255);
  font-weight: normal;

}

.images .name .textboxa h2 {
  display: inline-block;
  margin: 0px 0px 0px 25px;
  padding: 0px;
  text-transform: uppercase;
  
  
  line-height: 40px;
  
  
  text-shadow: 0px 0px 15px rgba(0,255,255,1);
  font-size: 14px;
  color: rgba(0,255,255,0.5);
  font-weight: normal;

}

.see3d {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: center;
  height: 35px;
  width: 65px;
  font-weight: bold;
  color: rgb(0,255,255);
  transition: text-shadow 0.3s linear,opacity 0.3s linear;
  cursor: pointer;

  text-transform: uppercase;
  opacity: 0.7;
}

.see3d:hover {
  text-shadow: 0px 0px 20px rgb(0,255,255);
  opacity: 1;
}

.links {
  display: block;
  position: relative;
  margin: 0px;
  padding: 0px;
  text-align: left;
  height: 35px;
  border-top: 3px solid rgb(0,255,255);
}

.links li {
  display: inline-block;
  position: relative;
  height: 35px;
  line-height: 35px;
  margin: 0px;
  padding: 0px 15px;
  color: rgb(0,255,255);
  transition: text-shadow 0.3s linear, color 0.3s linear, background 0.3s linear;
  font-size: 14px;
  cursor: pointer;
  background-color: rgba(0,255,255,0.2);
  text-transform: uppercase; 
}

.links li:hover {
  color: rgb(0,255,255);
  text-shadow: 0px 0px 20px rgb(0,255,255);
  background-color: rgba(0,255,255,0.5);
}

.text {
  color: white;
  font-size: 14px;
}



.text p {
  font-size: 14px;
  color: rgb(255,255,255);
  font-weight: normal;
  padding-top: 0px;
  margin-top: 0px;
  padding-left: 20px;
}

.descriptionp {
  color: white;
  font-size: 14px;
  padding: 20px 0px;
}

.descriptionp .desc {
  padding: 20px 0px;
  float: left;
  width: 48%;
  margin-right: 2%;
  padding-left: 20px;
}

.descriptionp .orderdiv {
  padding: 2%;
  float: right;
  width: 365px;
  position: relative;
  background-color: rgba(0,255,255,0.2);
}

.descriptionp .pricer {
}

.descriptionp .pricer .drive {

}

.descriptionp .pricer .drive .price {
   font-size: 14px;
   line-height: 16px;
}

.descriptionp .pricer .drive .price .super {
   font-size: 14px;
   line-height: 16px;
}

.descriptionp .pricer .nyni {

}

.descriptionp .pricer .cena {
       display: block;
}

.descriptionp .pricer .sleva .perc {
  
}

.descriptionp .order {
   margin: 0px 0px 0px;
   position: relative;
   height: 40px;
}

.descriptionp .order .itemqty {
  font-size: 16px;
  padding: 0px;
  height: 40px;
  width: 65px;
  font-weight: normal;
  color: white;
  text-align: center;
  border: 0px;
  border-radius: 0px;
  background-color: rgba(255,255,255,0.5);
    position: absolute;
    bottom: 0px;
    right: 100px;
}

.descriptionp .order button {
  font-size: 12px;
  text-transform: uppercase;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 40px rgb(0,255,255);
  font-weight: normal;

  padding: 0px 10px;
  height: 40px;
  width: 95px;
  text-align: center;
  border: 0px;
  border-radius: 0px;
  background-color: rgba(255,255,255,0.5);
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.descriptionp .order button:hover {
  text-align: right;

        animation: buy_animation 1s linear infinite alternate; 
}

        
@keyframes buy_animation {
    0% { opacity: 1; }
    33% { opacity: 0.9; }
    66% { opacity: 1; }
    100% { opacity: 0.8; }
}

div.tooltip {
display: inline;
outline:none;
text-decoration: none;
color: white;
text-align: left;
line-height:16px;
text-transform: uppercase;
 }
 
div.tooltip strong {line-height:16px;}
div.tooltip:hover {text-decoration:none;} 
div.tooltip span.upper {
    z-index:10000;
    visibility:hidden; 
    padding:5px;
    margin-top:-40px; 
    margin-left:3px;
    width:200px; 
    line-height:16px;
    opacity:0;
  transition:visibility 0s linear 0.3s,opacity 0.3s linear, margin 0.3s linear;
    
    position:absolute;
    color:rgb(0,255,255);
    border: 1px solid rgb(0,255,255);
    background-color: rgba(0,0,0,0.8);
    box-shadow: 0px 0px 15px rgba(0,255,255,0.5);
    
}

div.tooltip span.upper a{
    color: white;
    text-decoration: underline;

}
div.tooltip span.upper span.label span.piece{
   color: white;
 }

div.tooltip, div.tooltip .price, div.tooltip .price .super  {
  font-size: 11px;
  vertical-align: baseline;
  line-height:16px;
}

div.tooltip .price .super .currency  {
  display: none;
  line-height:16px;
}


div.tooltip span.upper span.label span.exc{
   color: white;
 }

div.tooltip .exc, div.tooltip .exc .super  {
  font-size: 11px;
  vertical-align: baseline;
  line-height:16px;
}

div.tooltip .exc .super .currency  {
  display: none;
  line-height:16px;
}


div.tooltip:hover span.upper{
    visibility:visible;
    
    opacity: 1;
    transition-delay:0s;
        animation: blink 100ms linear 2 alternate; 
    }
    
div.tooltip span.upper span.label{
   display: block;
 }



.descriptionp .hintbox .price .super .currency {
  display: none;
}


.descriptionp .puvodniprice, .descriptionp .puvodniprice .price, .descriptionp .puvodniprice .price .super  {
  font-size: 12px;
  vertical-align: baseline;
}

.titlei {
  color: rgb(255,255,255);
  font-size: 21px;
  text-shadow: 0px 0px 20px rgb(255,255,255);
  margin: 30px 0px;

}
.containerv {
 margin: 15px 0px;
}

.atributy {
  width: 100%;
  color: white;
  margin: 15px 0px;
}

.atributy td, .atributy th {
  width: 50%;
  
}

.atributy th {
  text-align: right;
  padding-right: 15px;
  font-weight: normal;
  color: rgb(0,255,255);
  background-color: rgba(0,255,255,0.2);
}

.atributy td {
  text-align: left;
  padding-left: 15px;
  font-weight: bold;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 20px rgb(0,255,255);
}

.atributyx {

}

.atributyx .atributx {
  background-color: rgba(0,255,255,0.2);
  width: 120px;
  padding: 10px;
  float: left;
  margin: 3px;
  line-height: 15px;
  min-height: 46px;
}

.atributyx .atributx .nadpisx {
  color: rgb(0,255,255);
  text-transform: uppercase;
}

.atributyx .atributx .valx {
  color: rgba(0,255,255,0.5);
  
}



.price {
  font-size: 23px;
 
  line-height: 30px;
}

.price .super {
  font-size: 13px;
  vertical-align: text-top;
}

.price .super .currency {
  color: rgb(0,255,255);
}



.exc {
  font-size: 26px;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 40px rgb(0,255,255);
  line-height: 23px;
}

.exc .super {
  font-size: 13px;
  vertical-align: text-top;
}

.exc .super .currency {
  color: rgb(0,255,255);
}



.descriptionp .pricer .drive .exc {
   font-size: 14px;
   line-height: 16px;
}

.descriptionp .pricer .drive .exc .super {
   font-size: 14px;
   line-height: 16px;
}


.simitem { display: block;  float: left; width: 300px; margin: 10px; height: 350px;  cursor: pointer; position: relative; background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 50, 50, 0.5) 100%); text-decoration: none; text-align: left; }

.simitem:after {
 content: "";
 position: absolute;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 border: 1px solid rgba(0,255,255,1);

  filter: blur(2px);
  transition: filter 0.1s linear 0s,box-shadow 0.1s linear 0s;
}

.simitem:hover:after {

  filter: blur(2px);
  box-shadow: 0px 0px 5px rgba(0,255,255,0.5);
}




.simitem .image { display: block; height: 120px; width: 100%; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
.simitem .image img { width: 100%; }
.simitem .stripe {
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  background-color: rgba(0,255,255,0.2);
  bottom: 0px;
  left: 0px;
} 

.simitem .name { display: block; height: 21px; font-size: 18px; padding: 5px 5px 0px; color: rgb(0,255,255); text-shadow: none; font-weight: normal; overflow: hidden; transition: text-shadow 0.2s linear; }
.simitem:hover .name { text-shadow: 0px 0px 10px rgb(0,255,255); }
.simitem:hover .stripe { background-color: rgba(0,255,255,0.5); }

.simitem .vendor { display: block; font-size: 12px; padding: 0px 5px 0px; color: rgba(255,255,255,0.5); font-weight: normal; }
.simitem .description { display: block; padding: 5px 10px; height: 80px; overflow: hidden; color: white; text-align: left; font-size: 12px; line-height: 16px; }
.simitem .simprice { display: block; padding: 5px; text-align: right; position: absolute; bottom: 30px; right: 0px; color: white; }
.simitem .simprice .price { font-size: 20px; }
.simitem .simprice .price .super { line-height: 20px; }
.simitem .moreinfo { position: absolute; bottom: 0px; right: 0px; display: block; padding: 10px; text-align: right; margin-top: 10px; color: rgb(0,255,255); text-decoration: none; opacity: 0.8; font-size: 11px; }
.simitem:hover .moreinfo { animation: blink 100ms linear 2 alternate; }




.note {
  color: rgba(255,255,255,0.3);
  font-size: 12px;
}

#threebox {                      
width: 100%;
height: 350px;
position: relative;
display: none;
}

#threebox .bckground {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: black center no-repeat;
background-size: cover;

  filter: blur(3px);

}

#threebox .text {
  text-align: center;
  font-size: 20px;
  line-height: 350px;
    top: 0px;
    left: 0px;
    width: 100%;
    color: white;
    height: 100%;
    z-index: 10000;
    position: absolute;
    cursor: pointer;

    transition: text-shadow  0.3s linear;
}


#threebox:hover .text {
  text-shadow: 0px 0px 40px rgb(255,255,255);

}


.categorydetail {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 50, 75, 0.3) 10%, rgba(0, 50, 75, 0.6) 60%, rgba(0, 50, 75, 0.3) 90%, rgba(0, 0, 0, 0) 100%);
}

.itemdetail {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 50, 75, 0.3) 10%, rgba(0, 50, 75, 0.6) 60%, rgba(0, 50, 75, 0.3) 90%, rgba(0, 0, 0, 0) 100%);
}

.padder {
  padding: 5px;
}

.categorydetail .categoryfilters {
  float: left;
  width: 300px;
}

.categorydetail .categoryitems {
  float: right;
  width: calc(100% - 310px);
}

.categorydetail .categoryfilters .filter {
  border-right: 1px solid rgba(0,255,255,0.1);
  border-bottom: 1px solid rgba(0,255,255,0.1);
  font-size: 13px;
}

.categorydetail .categoryfilters .filter .headerbox {
  color: rgb(255,255,255);
  font-size: 12px;
  text-shadow: 0px 0px 20px rgb(255,255,255);
  padding: 5px 5px;

}

.categorydetail .categoryfilters .filter ul{
  display: block;
  margin: 0px;
  padding: 0px;
}

.categorydetail .categoryfilters .filter ul li{
  display: block;
  margin: 0px;
  padding: 0px;
  
}



.categorydetail .categoryfilters .filter.classes ul li a.checked { color: rgb(0,255,255); background-color: rgba(0,255,255,0.2); }
.categorydetail .categoryfilters .filter.classes ul li a{ display: block; position: relative; margin: 0px; padding: 0px 10px 0px 40px; color: rgba(255,255,255,0.9); text-decoration: none; transition: text-shadow 0.3s linear 0s, color 0.3s linear 0s; height: 45px; line-height: 45px; }
.categorydetail .categoryfilters .filter.classes ul li a:before { content : ""; display: block; position: absolute; top: 0; left: 0; background: url('hexagon-outline-16.png') 13px center no-repeat; width: 100%; height: 100%; opacity : 0.2; z-index: -1; transition: opacity 1s linear; }
.categorydetail .categoryfilters .filter.classes ul li a.checked:before { background: url('hexagon-16.png') 13px center no-repeat; opacity : 0.8; }
.categorydetail .categoryfilters .filter.classes ul li a:after { content : ""; display: block; position: absolute; top: 0; left: 0; background: url('arrow-24-16.png') right 25px center no-repeat; width: 100%; height: 100%; opacity : 0; z-index: -1; transition: opacity 0.1s ease-in 0s, background 0.2s linear 0s; }
.categorydetail .categoryfilters .filter.classes ul li:hover a:after { background: url('arrow-24-16.png') right 5px center no-repeat; opacity : 0.3; }   
.categorydetail .categoryfilters .filter.classes ul li:hover{ background-color: rgba(0,255,255,0.2); }
.categorydetail .categoryfilters .filter.classes ul li:hover a{ color: rgb(0,255,255); text-shadow: 0px 0px 10px rgb(0,255,255); }
.categorydetail .categoryfilters .filter.classes ul li:hover a:before { opacity : 1; }


.categorydetail .categoryfilters .filter.manufacturers ul li a.checked { color: rgb(0,255,255); background-color: rgba(0,255,255,0.2); }
.categorydetail .categoryfilters .filter.manufacturers ul li a{ display: block; position: relative; margin: 0px; padding: 0px 10px 0px 40px; color: rgba(255,255,255,0.9); text-decoration: none; transition: text-shadow 0.3s linear 0s, color 0.3s linear 0s; height: 30px; line-height: 30px; }
.categorydetail .categoryfilters .filter.manufacturers ul li a:before, .categorydetail .categoryfilters .filter.manufacturers ul li a.checked:before { 
content: "";
  
  border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid rgba(0,255,255,0.3);

  position: absolute;
  left: 15px; 
  top: 12px;
}
.categorydetail .categoryfilters .filter.manufacturers ul li a.checked:before { 
	border-bottom: 5px solid rgba(0,255,255,1);
}

   
.categorydetail .categoryfilters .filter.manufacturers ul li:hover{ background-color: rgba(0,255,255,0.2); }
.categorydetail .categoryfilters .filter.manufacturers ul li:hover a{ color: rgb(0,255,255); text-shadow: 0px 0px 10px rgb(0,255,255); }
.categorydetail .categoryfilters .filter.manufacturers ul li:hover a:before { border-bottom: 5px solid rgba(0,255,255,1); }






.categorydetail  .categoryitems .categorytexts {
    padding: 5px 5px 0px 5px;
}

.categorydetail  .categoryitems .categorytexts h1 {
   display: block;
   color: rgb(255,255,255);  
   font-size: 21px;
   text-shadow: 0px 0px 7px rgb(255,255,255);
   margin: 0px 0px;

   font-weight: normal;
   cursor: pointer;
   overflow: hidden;
}

.categorydetail  .categoryitems .categorytexts h1:after {
   background: url('arrow-203-16.png') center 0px no-repeat;
   content : "";
   display: inline-block;
   margin-left: 10px;
   width: 16px;
   height: 20px;
   opacity : 0;
   transition: opacity 0.1s linear 0s, background 0.1s linear 0s;
    
}

.categorydetail  .categoryitems .categorytexts:hover h1:after {
    opacity : 1;
    background-position: center 6px ;
}

.categorydetail  .categoryitems .categorytexts p {
   color: rgb(255,255,255);
   font-size: 13px;
   line-height: 16px;
   
}

.categorydetail  .categoryitems .categorytexts p#descr, .categorydetail  .categoryitems .categorytexts p#descr2 {
   display: none;
   
}


.categorydetail  .categoryitems .categorytexts h3 {
   display: block;
   color: rgba(255,255,255,0.7);  
   font-size: 13px;
   text-shadow: 0px 0px 7px rgba(255,255,255,0.7);
   margin: 0px 0px;

   font-weight: normal;
   cursor: pointer;
   overflow: hidden;
}

.categorydetail  .categoryitems .categorytexts h3:after {
   background: url('arrow-203-16.png') center 0px no-repeat;
   content : "";
   display: inline-block;
   margin-left: 10px;
   width: 16px;
   height: 20px;
   opacity : 0;
   transition: opacity 0.1s linear 0s, background 0.1s linear 0s;
    
}

.categorydetail  .categoryitems .categorytexts:hover h3:after {
    opacity : 1;
    background-position: center 6px ;
}



.catalogitem { 
  display: block;
  float: left;
  width: calc(50% - 20px);
  margin: 10px;
  height: 170px;
  cursor: pointer;
  position: relative;
  background-color: rgba(0,0,0,0.3);
  text-decoration: none;
  text-align: left;
}

.catalogitem:after {
 content: "";
 position: absolute;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 border: 1px solid rgba(0,255,255,1);

  filter: blur(2px);
  transition: filter 0.1s linear 0s,box-shadow 0.1s linear 0s;
}

.catalogitem:hover:after {

  filter: blur(2px);
  box-shadow: 0px 0px 5px rgba(0,255,255,0.5);
}





 

.catalogitem .image {
  display: block;
  /* height: 174px; */
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position:  -130px center;

  background-repeat: no-repeat;
  background-color: black;

}



.catalogitem .stripe {
  display: block;
  position: absolute;
  width: 100%;
  height: 50px;
  overflow: hidden;
  background-color: rgba(0,255,255,0.2);
  bottom: 0px;
  left: 0px;
} 
.catalogitem .stripe .name { display: block; height: 21px; font-size: 18px; padding: 5px 5px 0px 15px; color: rgb(0,255,255); text-shadow: none; font-weight: normal; overflow: hidden; transition: text-shadow 0.2s linear; }
.catalogitem:hover  .stripe .name { text-shadow: 0px 0px 10px rgb(0,255,255); }
.catalogitem .stripe .vendor { display: block; font-size: 12px; padding: 0px 5px 5px 15px; color: rgba(255,255,255,0.5); font-weight: normal; }

.catalogitem .simprice { 
  display: block;
  opacity: 1;
  padding: 0px;
  text-align: right;
  position: absolute;
  top: 4px;
  right: 9px;
  bottom: 50px;
  color: white;
  width: 200px; 
}
.catalogitem .simprice .order {}
.catalogitem .simprice .price { font-size: 20px; }
.catalogitem .simprice .price .super { line-height: 20px; }
.catalogitem .moreinfo { position: absolute; bottom: 7px; right: 11px; display: block;text-align: right; color: rgb(0,255,255); text-decoration: none; opacity: 0.2; font-size: 11px; }
.catalogitem:hover .moreinfo {  animation: blink 100ms linear 2 alternate; }
.catalogitem:hover .stripe { background-color: rgba(0,255,255,0.5); }







.cart .cartico {
display: block !important;   
height: 60px !important;
width: 80px !important;
background: url("cart-11-32.png") center no-repeat !important;
opacity: 0.5;
 }                     
 
 .cart .cartico:hover {
opacity: 1;
 }
 

 
.invtable {
    margin: 20px 0px 50px 0px;
}

.invtable .row {
  display: block;
  float: left;
  height: 140px;
  width: 140px;
  position: relative;
  margin: 20px;
  cursor: pointer;
}


.invtable .row:after {
 content: "";
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 border: 1px solid rgba(0,255,255,1);

  filter: blur(3px);
  transition: filter 0.2s linear;
}

.invtable .row:hover:after {

 filter: blur(2px);
}


.invtable .row .img  {
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
}


.invtable .row .img  .name {
  display: block;
  height: 38px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.invtable .row .img  .name span {
  display: block;
  font-size: 13px;
  line-height: 13px;
  padding: 5px;
  color: rgb(0,255,255);
  text-shadow: none;
  font-weight: normal;
  transition: text-shadow 0.2s linear;
}

.invtable .row .qty {
  width: calc(100% - 5px);
  position: absolute;
  /* left: 0px; */
  /* bottom: 5px; */
  text-align: right;
  position: absolute;
  top: 5px;
  right: 5px;
}

.invtable .row .qty .number {
  font-size: 20px;
  color: gold;
}

.invtable .row .qty .mu {
  font-size: 11px;
  text-transform: uppercase;
  color: white;
}


.inventory .detail {
  position: relative;
  height: 300px;
  display: none;
}

.inventory .detail .detail_bckgr {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-position: center left;
  background-size: cover;
  background-repeat: no-repeat;

  filter: blur(4px);
  opacity: 1;
  
  
}


.inventory .detail:after {
 content: "";
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 border-top: 1px solid rgba(0,255,255,1);
 border-bottom: 1px solid rgba(0,255,255,1);

  filter: blur(3px);
  transition: filter 0.2s linear;
}


.inventory .detail .img {
  position: absolute;
  height: 170px;
  width: 163px;
  top: 10px;
  left: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.inventory .detail .img:after {
 content: "";
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 border: 1px solid rgba(0,255,255,1);

  filter: blur(3px);
}

.inventory .detail .name {
  position: absolute;
  height: 105px;
  top: 15px;
  left: 200px;
  right: 15px;
  font-size: 34px;
  line-height: 30px;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 15px rgba(0,255,255,1);
  font-weight: normal;
  transition: text-shadow 0.2s linear;
}

.inventory .detail .name .manufacturer {
  display: block;
  font-size: 14px;
  color: rgba(0,255,255,0.5);
  font-weight: normal;
}

.inventory .detail .parms {
  position: absolute;
  height: 160px;
  top: 120px;
  left: 200px;
  right: 0px;
  
}

.inventory .detail .parms .date {
  position: absolute;
  height: 50px;
  top: 0px;
  left: 0px;
  width: 90px;
  color: rgba(0,255,255,0.5);
  line-height: 15px;
}

.inventory .detail .parms .date .label {
  display: block;
  position: relative;
  color: rgb(0,255,255);
  text-transform: uppercase;
}


.inventory .detail .parms .qty {
  position: absolute;
  height: 50px;
  top: 55px;
  left: 0px;
  width: 90px;
  color: rgba(0,255,255,0.5);
  line-height: 15px;
}

.inventory .detail .parms .date .qty {
  display: block;
  position: relative;
  color: rgb(0,255,255);
  text-transform: uppercase;
}

.inventory .detail .parms .qty .label {
  display: block;
  position: relative;
  color: rgb(0,255,255);
  text-transform: uppercase;
}

.inventory .detail .parms .qty .number {
  font-size: 20px;
  color: gold;
}

.inventory .detail .parms .qty .mu {
  font-size: 11px;
  text-transform: uppercase;
  color: white;
}


.inventory .detail .parms .parmslist {
  position: absolute;
  height: 100%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: calc(100% - 95px);
  border-left:  1px solid rgba(0,255,255,0.5);
  overflow: hidden;
}

.inventory .detail .parms .parmslist div {
  width: 100px;
  float: left;
  height: 70px;
  margin: 0px 0px 10px 10px;
  color: rgba(0,255,255,0.5);
  line-height: 15px;
}

.inventory .detail .parms .parmslist div .label {
  display: block;
  position: relative;
  color: rgb(0,255,255);
  text-transform: uppercase;
}

.empty_msg {
  display: block;
  position: relative;
  color: rgb(0,255,255);
  text-transform: uppercase;
  text-align: center;
  padding: 20px 0px;
  margin-top: 40px;
background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 50, 75, 0.5) 100%);
}

.empty_msg:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  border-top: 1px solid rgba(0,255,255,1);
  border-bottom: 1px solid rgba(0,255,255,1);

  filter: blur(3px);
  transition: filter 0.2s linear;
}




#mesage {
  display: none;
  position:absolute;
  top: 240px;
  height: 80px;
  width: 100%;
  z-index: 1000000000;
  position: absolute;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 50, 75, 0.5) 100%);
  
}


#mesage:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  border-top: 1px solid rgba(0,255,255,1);
  border-bottom: 1px solid rgba(0,255,255,1);

  filter: blur(3px);
  transition: filter 0.2s linear;
}

#mesage .textmesg {
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0px auto;
  min-width: 380px;
  padding: 30px;
  color: rgb(0,255,255);
  font-weight: normal;
}

button.getreward {
  width: 190px;
}



.loginhint {
    display: block;
    position: absolute;
    top: 39px;
    left: calc(50% + 150px);
    outline: none;
    text-decoration: none;
    text-align: left;
    font-size: 18px;
    vertical-align: baseline;
    line-height: 14px;
    z-index: 1000;
    padding: 10px;
    width: 95px;
    color: black;
    background-color: rgb(232,250,17);
    text-transform: uppercase;
    text-shadow: none;
    font-weight: normal;

 }
 
@media (max-width: 520px) { 
    .loginhint {
        left: calc(100% - 110px);
     }
}
 
.addhint {
    display: block;
    position: absolute;
    top: 12px;
    left: calc(100% - 70px);
    outline: none;
    text-decoration: none;
    text-align: left;
    font-size: 18px;
    vertical-align: baseline;
    line-height: 14px;
    z-index: 1000;
    padding: 10px;
    width: 95px;
    color: black;
    background-color: rgb(232,250,17);
    text-transform: uppercase;
    text-shadow: none;
    font-weight: normal;

}
 
 
.loginhint:before,
.addhint:before {
  content: "";
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid rgb(232,250,17);
  position: absolute;
  top: 0px;
  left: -10px;
}

.newpost {
    background-color: silver;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 30px 30px;
}

.imageblockx {
    position: relative;
    left: calc(50% - 100px);
    width: 200px;
    height: 200px;
    top: 0px;
}

.imageblockx .deluserimage {
    display: block;
    width: 200px;
    position: absolute;
    top: 90px;
    left: 0px;
    right: 0px;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(232,250,17);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: black;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: normal;
    height: 30px;
    border: 0px;
    text-align: center;
    line-height: 30px;
}


.imageblockx .deluserimage:hover {
  opacity: 1;
}

.rewardstatus {
  font-size: 14px;
  margin: 0px auto 10px auto;

  font-weight: normal;
  color: rgba(255,215,0,1);
  text-align: center;
}
 
.rewardstatus a {
  color: rgba(255,215,255,1);
  text-decoration: underline;
}

.member {
    font-size: 14px;
    color: rgba(255,215,0,1);
    text-align: center;
    font-weight: normal;
}





.transmission_end {
  position: relative;
  height: 20px;
  margin: 15px 0px;
  clear: both; 
}

.transmission_end:before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);

  filter: blur(2px); 
}

.transmission_end:after {
  content: "END OF TRANSMISSION";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  font-size: 9px;
  color: rgba(0,255,255,0.4);
  text-align: center;
    text-shadow: 0px 0px 3px rgba(0,255,255,0.5);
  
}





.transmission {
  position: relative;
  height: 20px;
  margin: 5px 0px;
  font-size: 9px;
  color: rgba(0,255,255,0.4);
  text-align: center;
  text-shadow: 0px 0px 3px rgba(0,255,255,0.5);
  text-transform: uppercase; 
}

.transmission:before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);

  filter: blur(2px); 
}

.transmission:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;  
}

.fleetbox {
    position: relative;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 70px;
    background-color: rgba(0,0,0,0.65);
}


.fleetbox:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.fleetbox:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  


.fleetbox .fleet_capitan {
  margin: 20px 0px 0px 0px;
  position: relative;
}


.fleetbox .fleet_capitan .avatar {
  display: block;
  float: left;
  text-decoration: none;
  background-size: cover;
  background-repeat: no-repeat;
  height: 110px;
  width: 110px;
  margin: 0px;
  position: relative;
    margin-left: 20px;
}

.fleetbox .fleet_capitan .avatar:before {
 content: "";
 position: absolute;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 border: 3px solid rgba(0,255,255,1);

  filter: blur(2px);
  transition: filter 0.1s linear 0s,box-shadow 0.1s linear 0s;
}



.fleetbox .fleet_capitan .avatar span {
  display: block;
  position: absolute;
  top: 43px;
  left: 0px;
  right: 0px;
  opacity: 0;
  cursor: pointer;
  background-color: rgba(103,233,237,0.6);
  padding: 0px 10px;
  transition: opacity 0.2s linear;
  color: rgb(255,255,255);
  text-shadow: 0px 0px 10px rgb(0,255,255);
  font-weight: normal;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  height: 30px;
  text-align: center;
  border: 0px;
  border-radius: 0px;
  box-shadow: 0px 0px 3px rgb(137,245,255);
  line-height: 30px;
}

.fleetbox .fleet_capitan .avatar:hover span {
  opacity: 1;

        animation: blink 100ms linear 2 alternate; 

}

.fleetbox .fleet_capitan .text {
float: right;
  font-size: 15px;
  margin: 0px;
  padding: 10px 0px;
  font-weight: normal;
  color: rgba(255,255,255,0.9);
  background-color: transparent;
  text-shadow: 0px 0px 40px rgba(255,255,255,1);
  width: calc(100% - 150px);
}
             
.fleetbox .fleet_capitan .text .name {
  font-size: 28px;
  position: relative;
  margin: 0px;
  padding: 5px 0px;
  font-weight: normal;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 40px rgb(0,255,255);
}

.fleetbox .fleet_capitan .text .member {
  font-size: 14px;
  color: rgba(255,215,0,1);
  text-align: left;
  font-weight: normal;
  position: relative;
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  text-shadow: 0px 0px 40px rgb(255,215,0);
}

.fleetbox .fleet_capitan .text .name input[type="text"] {
  width: 100px;
}

.fleetbox .fleet_capitan .text .rank {
  font-size: 13px;
  color: rgba(255,255,255,1);
  text-transform: uppercase; 
}

.fleetbox .fleet_capitan .text .email {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; 
}

.fleetbox .fleet_head {
  position: relative;
    min-height: 260px;
    padding-top: 50px;
}

.fleetbox .fleet_head .corp_logo {
  position: absolute;
  top: 60px;
  left: 0px;
  width: 300px;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 520px) { 
  .fleetbox .fleet_head .corp_logo {
    position: relative;
    width: 100%;
  }
}


.fleetbox .fleet_head .corp_logo span {
    display: block;
    position: absolute;
    top: 80px;
    left: calc(50% - 125px);
    width: 250px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: white;
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: black;
    text-transform: uppercase;
    font-size: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.fleetbox .fleet_head .corp_logo:hover span {
  opacity: 1;
}

.fleetbox .fleet_head .corp_logo span:hover {
  animation: blink 100ms linear 2 alternate; 
  background-color: rgb(232,250,17);
}

.fleetbox .fleet_head .corp_infos {
  position: relative;
  margin-left: 320px;
  margin-right: 10px;

}


@media (max-width: 520px) { 
  .fleetbox .fleet_head .corp_infos {
      position: relative;
      margin: auto;

  }
}

.fleetbox .fleet_head .corp_infos span {
display: block;
    position: absolute;
    top: 80px;
    left: calc(50% - 125px);
    width: 250px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(232,250,17);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: black;
    text-transform: uppercase;
    font-size: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.fleetbox .fleet_head .corp_infos:hover span {
    opacity: 1;
    animation: blink 100ms linear 2 alternate; 
}

.fleetbox .fleet_head .fleet_description {
    color: white;
    padding: 10px 0px 0px 10px;
    font-size: 14px;
    height: 196px;
    overflow: hidden;
}

@media (max-width: 520px) { 
    .fleetbox .fleet_head .fleet_description {
        height: auto;
        overflow: auto;
        font-size: 13px;
        left: auto;
        position: relative;
        right: auto;
        padding: 30px 15px;
    }
}

.fleetbox .members {
    width: 50%;
    box-sizing: border-box;
    float: left;
}
.fleetbox .members .renvoys {
  position: relative;
    padding: 35px 20px 10px;
}
.fleetbox .members .renvoys .before {

    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    right: 0px;
    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    letter-spacing: 3px;
    padding: 3px 5px;
    box-sizing: border-box;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    text-align: center;

    


}
.fleetbox .members .rmembers {
    position: relative;
    padding: 35px 20px 10px;
    min-height: 220px;
}

.fleetbox .members .rmembers .before {
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    right: 0px;
    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    letter-spacing: 3px;
    padding: 3px 5px;
    box-sizing: border-box;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    text-align: center;

    
}

@media (max-width: 520px) { 
    .fleetbox .members {
        width: auto;
        float: none;
        padding-top: 15px;
    }
}

.fleetbox .org_plist_in:before {
    content: 'OFFICIAL NOTICE BOARD';
}


.fleetbox .members .rmembers:before,
.fleetbox .members .renvoys:before,
.fleetbox .org_plist_in:before{
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    right: 0px;
    font-size: 17px;
    color: white;
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    letter-spacing: 3px;
    padding: 3px 5px;
    box-sizing: border-box;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    text-align: center;
}




.fleetbox .members .fleet_cat,
.userbox .fleet_cat {
    display: block;
    position: relative;
    float: left;
    width: 120px;
    height: 190px;
    margin: 7px;
    background: white;
    box-sizing: border-box;
    padding: 10px;
}

.fleetbox .members .fleet_cat.empty {
    display: block;
    float: left;
    margin: 7px;
    background: white;
    cursor: pointer;
    width: 120px;
    height: 180px;
    text-align: center;
    box-sizing: border-box;
    padding: 0px;
    font-size: 12px;
    text-transform: uppercase;
    transition: opacity 0.2s linear;
    color: black;
    font-weight: normal;
    text-decoration: none;
    font-size: 32px;
    line-height: 180px;
    position: relative;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
}
.fleetbox .members .fleet_cat.empty:hover {
    
    background: white;
}


.fleetbox .members .fleet_cat span.uenvoy {
    display: block;
    position: absolute;
    top: 47px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(232,250,17);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: rgb(0,0,0);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 17px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    z-index: 100;
}


.fleetbox .members .fleet_cat:hover span.uenvoy {
  opacity: 1;

        animation: blink 100ms linear 2 alternate; 

}

.fleetbox .members .fleet_cat span.remove {
    display: block;
    position: absolute;
    top: 84px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(168,0,0);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: white;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    z-index: 100;
}

.fleetbox .members .fleet_cat:hover span.remove {
  opacity: 1;

        animation: blink 100ms linear 2 alternate; 

}


.fleetbox .members .fleet_cat a.profile {
    display: block;
    position: absolute;
    top: 9px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(232,250,17);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: black;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    z-index: 100;
}

.fleetbox .members .fleet_cat:hover a.profile {
  opacity: 1;

        animation: blink 100ms linear 2 alternate; 

}

.fleetbox .members .fleet_cat span.menvoy {
    display: block;
    position: absolute;
    top: 47px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    background-color: rgb(232,250,17);
    padding: 0px 10px;
    transition: opacity 0.2s linear;
    color: black;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    z-index: 100;
}

.fleetbox .members .fleet_cat:hover span.menvoy {
  opacity: 1;

        animation: blink 100ms linear 2 alternate; 

}
   
    
    
    
    
.fleetbox .members .fleet_cat .face,
.userbox .fleet_cat .face {
    display: block;
    position: absolute;
    height: 120px;
    top: 0px;
    z-index: 2;
    left: 0px;
    width: 120px;
    background-repeat: no-repeat;
    background-position: center top;
        background-size: cover;
    box-sizing: border-box;
    overflow: hidden;
    background-color: black;


    }
    
.fleetbox .members .fleet_cat .frank,
.userbox .fleet_cat .frank {
    display: block;
    position: absolute;
    height: 120px;
    top: 0px;
    z-index: 3;
    left: 0px;
    width: 120px;
    background-repeat: no-repeat;
   background-position: 67px 79px;
    background-size: 53px;
    box-sizing: border-box;
    overflow: hidden;
    }
    
.fleetbox .members .fleet_cat .name,
.userbox .fleet_cat .name {
    position: absolute;
    display: block;
    font-size: 17px;
    color: black;
    overflow: hidden;
    text-align: center;
    top: 123px;
    left: 5px;
    right: 5px;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 13px;
    overflow: hidden;
    }

.fleetbox .members .fleet_cat .flagdiv {
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.3;

    filter: blur(3px);
    
    }
.fleetbox .members .fleet_cat .role,
.userbox .fleet_cat .role {
    position: absolute;
    display: block;
    font-size: 17px;
    text-align: center;
    top: 166px;
    left: 5px;
    right: 5px;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(0,0,0,0.5);;
    overflow: hidden;
}

.fleetbox .members .fleet_cat .rank,
.userbox .fleet_cat .rank {
    position: absolute;
    /* display: none; */
    font-size: 18px;
    text-align: center;
    top: 149px;
    left: 5px;
    right: 5px;
    text-transform: uppercase;
    color: black;
    overflow: hidden;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(0,0,0,0.5);
    overflow: hidden;
}


.fleetbox .members .fleet_cat .crew {
    position: absolute;
    display: block;
    font-size: 10px;
    text-align: center;
    top: 165px;
    left: 0px;
    right: 0px;
    text-transform: uppercase;
    color: rgba(0,255,255,0.5);
    height: 30px;
    text-align: center;
    }
  
.fleetbox .members .fleet_member .memberface {
  width: 50px;
  height: 50px;
  background-size: cover;
  position: relative;
  margin: 5px auto;
}

.fleetbox .members .fleet_member .memberface:before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border: 3px solid rgba(0,255,255,1);

  filter: blur(2px);
}

.fleetbox .members .fleet_member span.upper {
 display: block;
 text-align: center;
 color: white;
}

.edit_organisation {
    display: block;
    position: absolute;
    top: 30px;
    left: calc(50% - 250px);
    width: 500px;
    padding: 20px 20px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 50, 75, 1);
    color: white;
    text-align: center;
    box-sizing: border-box;
    z-index: 100;
}

.edit_organisation input,
.edit_organisation textarea  {
    width: 100%;
    text-align: left;
    text-shadow: initial;
}

.edit_organisation table  {
    width: 100%;
}

.edit_organisation table th {
    text-align: right;
    padding-right: 10px;
}

.edit_organisation table td {
   width:75%;
}

.edit_organisation .text {
    font-size: 15px;
    margin: 0px;
    padding: 10px 0px;
    font-weight: normal;
    color: rgba(255,255,255,0.9);
    background-color: transparent;
    text-shadow: 0px 0px 40px rgba(255,255,255,1);
}

.edit_organisation .text small {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}



.edit_organisation table th.button,
.edit_organisation table td.button {
    padding-top: 20px;
    text-align: right;
}

.edit_organisation table td textarea {
    margin: 5px 0px;
}

.edit_organisation .notice {
    display: block;
    margin: 5px 0px;
    text-align: justify;
    font-size: 13px;
}


.edit_organisation_image {
        display: block;
    position: absolute;
    top: 65px;
    left: calc(50% - 200px);
    margin: 0px auto;
    width: 400px;
    padding: 20px 20px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 50, 75, 1);
    color: white;
    text-align: left;
        z-index: 100;
}


.edit_organisation_image button {width: 100%;}

.edit_organisation_image .text {

    margin: 0px;
    font-weight: normal;
    color: rgba(255,255,255,0.9);
    background-color: transparent;
    font-size: 17px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
}

.edit_organisation_image .text.padding {


    padding: 10px 0px;

}

.edit_organisation_image .text small {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}

.leavefleet {
    text-align: center;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

.leavefleet button {
       width: 200px;

}

.leaveenvoy {
    text-align: center;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

.leaveenvoy button {
       width: 200px;

}


.joinfleet {
    text-align: center;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

.joinfleet button {
       width: 200px;

}

.note {
  position: relative;
  height: 20px;
  font-size: 15px;
  color: rgba(164,0,0,1);
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
      letter-spacing: -1px;
}

.note:before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);

  filter: blur(2px); 
}

.note:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  
  
}

.pagingplayers {
  text-align: right;
  padding: 3px 10px;
}

.totalplayers {
  text-align: left;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: normal;
  color: rgb(0,255,255);
  text-shadow: 0px 0px 40px rgb(0,255,255);

}

.fleets .fleet {
 position: relative;
 padding-left: 8px;
}

.fleets .fleet .flagdiv {
 position: absolute;
 background-repeat: no-repeat;
 background-size: contain;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 opacity: 0.3;

}


.reswindow {
    position: absolute;
    top: 80px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    }



.close{
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 14px;  
    right: 14px;
    opacity: 0.5;
    z-index: 99;
    background:url('../../img/ico/close-window-16.png') center no-repeat;    
    }

.close:hover{opacity:1;}
.scroll {    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;}
    


 

.switch{position:absolute;top: 41px; left: 7px;height:35px;color:white;text-align:left;}
.switch .switcher{
        display: inline-block;
    position: relative;
    text-align: center;
    padding: 0px 0px;
    margin: 5px;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    height: 28px;
    min-width: 28px;
    opacity: 0.6;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 0px center;
    line-height: 28px;
    padding-left: 29px;
    padding-right: 5px;
    font-size: 10px;
    text-transform: uppercase;
    }
.switch .switcher:hover{opacity: 1;}

.switch .switcher.table {
   background-image: url('../../img/ico/ico_list_128.png');
   
}

.switch .switcher.graph {
   background-image: url('../../img/ico/ico_graph_128.png');
   
}

.switch .switcher.catalog {
   background-image: url('../../img/ico/ico_boxes_128.png');
   
}

@media (max-width: 520px) { 
    .switch .switcher.catalog {
       display: none;
       
    }
    .switch .switcher.table {

    }
}

.switch .switcher.neworg {
   background-image: url('../../img/ico/add-128.png');
   
}

.switch .switcher.myorg {
   background-image: url('../../img/ico/corp-128.png');
   
}







.orgsbuttons{position: absolute;
    top: 50px;
    left: 10px;
    color: white;
    text-align: left;}



.page{    position: absolute;
    top: 2px;
    right: 10px;
    height: 26px;
    color: white;
    text-align: left;}
.page .pager{
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 0px 0px;
    margin: 5px 0px;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    height: 15px;
    width: 15px;
    opacity: 0.6;
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;

    }
.page .pager:hover{opacity: 1;}

.page .pager.prev {
   background-image: url('../../img/ico/arrow-88-32.png');
   
}

.page .pager.next {
   background-image: url('../../img/ico/arrow-24-32.png');
   
}

#fleetsscreen .page {
       top: 50px;
}
.corporationslist{position:absolute;top:70px;left:20px;right:20px;bottom: 45px; background-color: rgba(0,0,0,0.65);}
.corporationslist:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.corporationslist:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  

  


.corporationslist .reswindow table{  
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    box-sizing: border-box;}
.corporationslist .reswindow tr:hover {    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;}
.corporationslist .reswindow td{color:rgb(255,255,255);padding:0px 10px;font-size:13px;font-weight:normal;text-align:left;overflow:hidden;height:17px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.05);}
.corporationslist .reswindow th{
    padding-left: 5px;
    text-align: left;
    font-weight: normal;
    background-color: white;
    font-weight: bold;
    color: black;}
.corporationslist .stocksign{display:inline-block;height:100%;width:10px;}
.corporationslist .stocksign.up{background:url('../../img/ico/ico_stock_up-24.png') center 7px no-repeat;background-size:8px;}
.corporationslist .stocksign.down{background:url('../../img/ico/ico_stock_down-24.png') center bottom no-repeat;background-size:8px;}
.corporationslist .stocksign.updown{}
.corporationslist .reswindow .graph{
position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    background: linear-gradient(to right,rgba(255,255,255,0.1) 0%,rgba(0,0,0,0) 100%);
    }
.corporationslist .reswindow .graph .graphinside{position: absolute;
    top: 23px;
    right: 10px;
    left: 10px;
    bottom: 0px;
    background-image: url(1x80_op.png);
    background-position: left bottom;}
.corporationslist .reswindow .graph .graphinside .columnbox{position:relative;float:left;width:5px;height:100%;overflow:hidden;}
.corporationslist .reswindow .graph .graphinside .columnbox .column{position:absolute;height:100%;left:1px;right:1px;cursor:pointer;}
.corporationslist .reswindow .graph .graphinside .columnbox .column .liner{
position: absolute;
    bottom: 0px;
    left: 25%;
    right: 25%;
    top: 0px;
    background: rgb(255,255,255);
    background-color: white;


}
.corporationslist .reswindow .graph .graphinside .columnbox .column:hover .liner{opacity:0.9;}
.corporationslist .reswindow .graph .graphinside .columnbox .column .number{position: absolute;
    left: 0px;
    right: 0px;
    top: -38px;
    height: auto;
    font-size: 9px;
    color: rgba(255,255,255,0.2);
    transform: rotate(-90deg);
    white-space: nowrap;}
.corporationslist .reswindow .graph .graphinside .columnbox .column:hover .number{color:rgba(255,255,255,0.9);}
.corporationslist .reswindow .graph .graphinside .columnbox .column .name{color:rgba(255,255,255,0.9);}
.corporationslist .reswindow .graph .graphinside .columnbox .column:hover .name{color:rgba(255,255,255,0.9);}
.corporationslist .reswindow .graph .graphinside .columnbox .column .bigname{color:rgba(255,255,255,0.5);}
.corporationslist .reswindow .graph .graphinside .columnbox .column:hover .bigname{color:rgba(255,255,255,0.9);}


.stock{position:absolute;top:80px;left:20px;right:20px;bottom: 70px; background-color: rgba(0,0,0,0.65);}
.stock:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.stock:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  


.stock .corpname{
position:absolute;
top:60px;left:15px;text-transform:uppercase;line-height:30px;
font-size: 55px;
    color: rgba(255,255,255,.9);
    text-shadow: rgb(163,188,255) 0px 0px 6px;
}
.stock .corpid{
    font-size:70px;
    position:absolute;
    top:65px;
    right:15px;
    text-shadow: rgb(255,213,182) 0px 0px 6px;
    color: rgba(255,255,255,0.60);
    text-transform:uppercase;
    }
.stock .description{    
    font-size: 17px;
    position: absolute;
    top: 113px;
    left: 15px;
    right: 320px;
    height: 115px;
    color: white;
    }
.stock .stockvalues{    
    font-size: 45px;
    position: absolute;
    top: 120px;
    width: 300px;
    right: 15px;
    height: 37px;
    color: white;
    text-align: right;
    letter-spacing: -2px;
    font-weight: normal;
    }
.stock .stockvalues .stocksign{display:inline-block;height:100%;width:24px;}
.stock .stockvalues .stocksign.up{background:url('../../img/ico/ico_stock_up-24.png') center 5px no-repeat;}
.stock .stockvalues .stocksign.down{background:url('../../img/ico/ico_stock_down-24.png') center bottom no-repeat;}
.stock .stockvalues .stocksign.updown{}
.stock .graph{position:absolute;top:240px;right:5px;left:5px;bottom:5px;color:white;text-align:left;border-spacing:0px;    background: rgba(0,0,0,0.9);}
.stock .graph .graphinside{position:absolute;top:23px;right:10px;left:10px;bottom:20px;background-image:url('1x80_op.png');background-position:left bottom;}
.stock .graph .graphinside .columnbox{position:relative;float:left;width:5px;height:100%;overflow:hidden;}
.stock .graph .graphinside .columnbox .column{position:absolute;height:100%;left:1px;right:1px;}
.stock .graph .graphinside .columnbox .column .liner{position:absolute;bottom:0px;left:0px;right:0px;top:0px;background:url('1x1_white.png') center repeat-y;opacity:0.2;}
.stock .graph .graphinside .columnbox .column .topper{position:absolute;top:0px;left:2px;right:2px;height:3px;z-index:1000;}
.stock .graph .graphinside .columnbox .column .topper.positive{background-color:rgba(255,255,255,1);}
.stock .graph .graphinside .columnbox .column .topper.negative{background-color:rgba(255,255,255,0);border:1px solid rgba(255,255,255,1);}
.stock .graph .graphinside .columnbox .column:hover .liner{opacity:0.9;}
.stock .graph .graphinside .columnbox .column .number{position:absolute;left:0px;right:8px;top:-25px;height:10px;font-size:9px;opacity:0.9;transform:rotate(-90deg);}
.stock .graph .graphinside .columnbox .column:hover .number{opacity:0.9;}




    
.fleets{position:absolute;top:70px;left:20px;right:20px;bottom: 45px; background-color: rgba(0,0,0,0.65);}
@media (max-width: 520px) { 
    .fleets {
        position:absolute;
        left:5%;
        right:5%;
     }
}


.fleets:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.fleets:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  


.fleets .fleetstab{position:relative;width: 100%;color:white;box-sizing:border-box; border-spacing: 0px;
    border-collapse: separate;}
.fleets .fleetstab tr td { cursor: pointer }

.fleets .fleetstab tr:hover {  
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
        color: black;

}

.fleets .fleetstab th {     
    padding-left: 5px;
    text-align: left;
    font-weight: normal;
    background-color: white;
    font-weight: bold;
        color: black;
            line-height: 17px;
}
.fleets .fleetstab td { text-align: left; font-size: 13px; font-weight: normal; padding: 5px; }
.fleets .fleetstab td.number { font-size: 12px; font-weight: normal; color: rgba(255,215,0,1); width: 20px; text-align: center; }
.fleets .fleetstab td.imgtd { width: 50px; }
.fleets .fleetstab .lisname { font-size: 15px; position: relative; margin: 0px; padding: 0px; font-weight: normal; color: rgb(0,255,255); text-shadow: 0px 0px 40px rgb(0,255,255);  }
.fleets .fleetstab .lismail { display: block; font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.fleets .fleetstab .fleet_name { font-weight: normal; color: rgba(0,255,255,0.4); }
.fleets .fleetstab .fleet_name.glow { color: rgb(0,255,255); text-shadow: 0px 0px 40px rgb(0,255,255); }
.fleets .fleetstab .fleet_nationality { color: rgba(255,255,255,0.5); text-transform: uppercase; }
.fleets .fleetstab .tooltip .lisname { font-size: 11px; position: relative; margin: 0px; padding: 5px 0px; font-weight: normal; color: rgb(0,255,255); text-shadow: 0px 0px 40px rgb(0,255,255); }
.fleets .fleetstab .tooltip .lismail { display: block; font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.fleets .fleetstab .face { display: block; width: 40px; height: 40px; background-size: cover; position: relative; margin: 5px; text-decoration: none; }

.fleets .fleetstab .memberface { width: 30px; height: 30px; background-size: cover; position: relative; float: left; margin: 5px; }
.fleets .fleetstab .memberface:before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border: 3px solid rgba(0,255,255,1);  filter: blur(2px); }
.fleets .fleetstab .la {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
}
.fleets .fleet_cat {
    display: block;
    position: relative;
    float: left;
    width: 150px;
    /* border: 1px solid rgb(255,255,255); */
    height: 220px;
    margin: 3px;
    box-sizing: border-box;
    cursor: pointer;
    background: black;
    }
.fleets .fleet_cat:hover {
    background-color: rgba(255,255,255,0.1);
    }
    
.fleets .fleet_cat .face {
    display: block;
    position: absolute;
    height: 110px;
    top: 11px;
    z-index: 2;
    left: calc(50% - 55px);
    width: 110px;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    background-size: contain;
    overflow: hidden;
    }
    

    
.fleets .fleet_cat .name {
    position: absolute;
    display: block;
    font-size: 13px;
    color: rgb(255,255,255);
    text-align: center;
    top: 120px;
    left: 5px;
    right: 5px;
    overflow: hidden;
    line-height: 16px;
    height: 45px;
}

.fleets .fleet_cat .name span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    right: 0px;
}

.fleets .fleet_cat .last_update {
    position: absolute;
    display: block;
    font-size: 10px;
    overflow: hidden;
    text-align: center;
    top: 170px;
    left: 5px;
    right: 5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    overflow: hidden;

}



.fleets .fleet_cat .crew {
    position: absolute;
    display: block;
    font-size: 10px;
    text-align: center;
    top: 183px;
    left: 0px;
    right: 0px;
    text-transform: uppercase;
    color: rgba(0,255,255,0.5);
    height: 30px;
    text-align: center;
}
    
.fleets .fleet_cat .crew .member,
.fleets .fleet_cat .crew .envoy {
    position: absolute;
    display: block;
    font-size: 12px;
    text-align: center;
    width: 30%;
    padding-left: 20px;
    box-sizing: border-box;
    color: rgba(0,255,255,0.5);
    height: 30px;
    text-align: left;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 14px;
    line-height: 30px;
    color: white;
}

.fleets .fleet_cat .crew .envoy {
    left: 22%;
    background-image: url('../../img/ico/star-7-16.png');
}

.fleets .fleet_cat .crew .member {
    right: 18%;
    background-image: url('../../img/ico/user-5-16.png');
}
    


.fleetstab td.oid,
.fleetstab th.oid {
    text-align: right;
    padding-right: 15px;
}

.fleetstab td.oid {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
}

.fleetstab td.crew,
.fleetstab th.crew {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: 30px;
}
.fleetstab th.crew img {
filter: invert(100%);
}


#star_infos {
    position: absolute;
    top: 60px;
    bottom: 15px;
    right: -40%;
    z-index: 1;
    background-color: rgba(0,0,0,0.65);
    box-sizing: border-box;
    padding: 15px;
    display: none;
    width: 350px;

    animation:showBox 150ms linear 1 alternate;
}



#star_infos:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
#star_infos:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  


#star_infos.visible {
    right: 10px;
    display: block;
}

#star_infos h1,
#star_infos h2{
    height: 37px;
    color: white;
    box-sizing: border-box;
    line-height: 37px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 40px;
    font-weight: normal;
    text-align: center;
    margin: 0px;
}

#star_infos h2{

    font-size: 22px;
    height: 22px;
    line-height: 22px;

}
#star_infos table{
    position: absolute;
    top: 80px;
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    width: calc(100% - 30px);
    border-spacing: 0px;
    border-collapse: separate;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    display: none;
}

@media (max-width: 700px) { 
      #star_infos table {
          display: none;
      }
}

#star_infos table th{
width: 50%;
    padding: 0px;
    padding-right: 5px;
    text-align: right;
    font-weight: normal;
    color: rgba(255,255,255,0.4);
    line-height: 14px;
}

#star_infos table td{
    padding: 3px;
    padding-left: 5px;
    font-weight: bold;
    text-align: left;
    line-height: 14px;
    background-color: white;
    color: black;
}

#star_infos .content {
    position: absolute;
    top: 80px;
    bottom: 0px;
    right: 0px;
    left: 0px;

}



#star_infos .content .stars{
    position: relative;
    padding-top: 18px;
    padding-bottom: 30px; 
}

#star_infos .content .stars:before{
    content: 'STARS';
    display: block;
    position: absolute;
    top: 0px;
    left: 11px;
    color: rgba(255,255,255,0.2);
    font-size: 20px;
}

#star_infos .content .stars .star{
    position: relative;
    text-align: left;
    height: 130px;
    
}

#star_infos .content .stars .star .sicon{
   position: absolute;
   height: 90px;
   width: 90px;
   left: 20px;
   top: 20px;
}

#star_infos .content .stars .star .sicon span{
   position: absolute;
   display: block;
   border-radius: 2000px;
   background-image: url('stars/star_bckg_b.png');
   background-position: center;
   background-size: 102%;
   background-repeat: no-repeat;
   
   
}


#star_infos .content .stars .star .sicon span:after{
    content: '';
    display: block;
    position: absolute;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    background-image: url(stars/corona.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.6;       
}

#star_infos .content .stars .star .sdata {
    display: block;
    position: absolute;
    left: 140px;
    top: 37px;
    background-color: white;
    padding: 4px 8px;
    right: 0px;
}

#star_infos .content .stars .star .sdata .name,
#star_infos .content .stars .star .sdata .type,
#star_infos .content .stars .star .sdata .radius {
   
    display: block;
    color: black;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
   
    line-height: 15px;
}

#star_infos .content .stars .star .sdata .name {
   
   
}





#star_infos .content .planets{
    position: relative;
    padding-top: 18px;
    padding-bottom: 30px; 
}

#star_infos .content .planets:before{
    content: 'PLANETS AND MOONS';
    display: block;
    position: absolute;
    top: 0px;
    left: 11px;
    color: rgba(255,255,255,0.2);
    font-size: 20px;
}

#star_infos .content .planets .planet{
    position: absolute;
    text-align: left;
    height: 100px;
    width: 100%;
    cursor: pointer;
}

#star_infos .content .sinfo{
    color: white;
    text-align: center;
    padding: 3px 0px;
    display: block;
    /* position: absolute; */
    top: 0px;
    left: 11px;
    color: rgba(255,255,255,1);
    font-size: 18px;
    text-transform: uppercase;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;
    margin: 8px 0px;
}

#star_infos .content .planets .planet:hover{
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;
    z-index: 1000;
}

#star_infos .content .planets .planet:hover{
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;
    z-index: 1000;
}


#star_infos .content .planets .planet .distline{
    position: absolute;
    top: 38px;
    left: 40px;
    width: 58px;
    bottom: 50%;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.3);
    font-size: 8px;
    line-height: 10px;
    padding-left: 3px;
    transition: opacity 0.2s;
    opacity: 1;
    box-sizing: border-box;
    z-index: 100;
}

#star_infos .content .planets .planet:hover .distline{
    transition: opacity 0.6s;
    opacity: 0;
}

#star_infos .content .planets .planet .picon{
position: absolute;
    height: 100px;
    width: 100px;
    left: 50px;
    top: 0px;
    transition: left 0.2s;
}

#star_infos .content .planets .planet:hover .picon{
    left: 20px;
}

#star_infos .content .planets .planet .picon span{
   position: absolute;
   display: block;
   border-radius: 2000px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   transition: 0.6s;
       filter: grayscale(100%);
}

#star_infos .content .planets .planet:hover .picon span{
    margin: 0%  !important;
    
    width: 100%  !important;
    height: 100%  !important;
}

#star_infos .content .planets .planet .picon span:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 100%);
    z-index: 10;
    border-radius: 100px;  
}



#star_infos .content .planets .planet .type,
#star_infos .content .planets .planet .radius,
#star_infos .content .planets .planet .distance {
    display: block;
    position: absolute;
    width: 100px;
    left: 130px;
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    opacity: 0;
     font-weight: bold; 
}

#star_infos .content .planets .planet .name {
    display: block;
    position: absolute;
    width: 300px;
    top: 40px;
    left: 165px;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    text-transform: uppercase;
    transition: top 0.3s;
  
}

#star_infos .content .planets .planet:hover .name {
    top: 8px;
    left: 130px;
    font-size: 12px;
    color: rgba(0,0,0,1);
    font-weight: bold; 
}







#star_infos .content .planets .planet .type {
   opacity: 0;
   top: 22px;
   
}

#star_infos .content .planets .planet:hover .type {
   transition: opacity 1s;
   opacity: 1;
   color: rgba(0,0,0,1);
}

#star_infos .content .planets .planet .radius {
   opacity: 0;
   top: 34px;
   
}

#star_infos .content .planets .planet:hover .radius {
   transition: opacity 1s;
   opacity: 1;
   color: rgba(0,0,0,1);
}

#star_infos .content .planets .planet .distance {
   opacity: 0;
   top: 47px;
  
}

#star_infos .content .planets .planet:hover .distance {
   transition: opacity 1s;
   opacity: 1;
   color: rgba(0,0,0,1);
}


#star_infos .content .planets .planet .moons{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 210px;
    right: 0px;
    overflow: hidden;
    display: none;
}

#star_infos .content .planets .planet .moons .moon{
    position: relative;
    width: 25px;
    height: 100%;
    float: left;
}

#star_infos .content .planets .planet .moons .moon .micon{
    position: absolute;
    height: 90px;
    width: 90px;
    left: -33px;
    top: -15px;
}

#star_infos .content .planets .planet .moons .moon .micon span {
   position: absolute;
   display: block;
   border-radius: 2000px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   
}

#star_infos .content .planets .planet .moons .moon .name,
#star_infos .content .planets .planet .moons .moon .type,
#star_infos .content .planets .planet .moons .moon .radius {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 75px;
    height: 12px;
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    transform: rotate(-90deg);
    white-space: nowrap;
    text-align: right;
    line-height: 12px;
    text-transform: uppercase;
    width: 85px;
    color: black;
    font-weight: bold;
}

#star_infos .content .planets .planet .moons .moon .name {
    left: -36px;

}

#star_infos .content .planets .planet .moons .moon .type {
    left: -25px;
}



#star_infos .content .planets .planet:hover .moons{
    display: block;
}




#star_infos .content .planets .info,
#star_infos .content .stars .info {
    padding: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    text-align: center;
}


#star_infos .content .planets .ruler{
    position: absolute;
    top: 70px;
    bottom: 0px;
    left: 15px;
    width: 25px;
    background-image: url('planets/ruler.png');
    background-position: left top;
    background-repeat: repeat-y;
    opacity: 0.4;
    overflow: hidden;
}

#star_infos .content .planets .ruler span{
    position: relative;
    display: block;
    height: 100px;
    width: 25px;
    color: white;
    text-align: left;
    font-size: 9px;
}

#star_infos .content .planets .chz{
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: rgba(255,255,255,0.4);
    opacity: 0.4;
    font-size: 10px;
    text-align: right;
    padding: 0px 4px;
    box-sizing: border-box;
    color: black;
    overflow: hidden;
}

#star_infos .content .planets .ohz{
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: rgba(255,255,255,0.4);
 
    opacity: 0.4;
    font-size: 10px;
    text-align: right;
    padding: 0px 4px;
    box-sizing: border-box;
    color: black;
    overflow: hidden;
}

#moresectorsdiv {
    position: absolute;
    width: 180px;
    z-index: 10000;
    padding: 0px 0px 0px;
    box-sizing: border-box;
    background-color: rgba(20, 20, 20, 0.95);
}

#moresectorsdiv:before{content: '';
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgba(20, 20, 20, 0.95);
    position: absolute;
    top: 0px;
    left: -10px;}

#moresectorsdiv .sector{
    position: relative;
    font-size: 10px;
    color: white;
    text-transform: uppercase;
    padding: 3px 10px;
    cursor: pointer; 
}
#moresectorsdiv .sector:hover {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;
 }
 

#moresectorsdiv .sector:hover .name,
#moresectorsdiv .sector:hover .cat,
#moresectorsdiv .sector:hover .type{
    color: black;
    font-weight: bold;
}
 

#moresectorsdiv .sector .name,
#moresectorsdiv .sector .cat,
#moresectorsdiv .sector .type{
    display: block;
    line-height: 13px;
}

#moresectorsdiv .sector .name{
    color: rgba(255,255,255,1);
}

#moresectorsdiv .sector .cat,
#moresectorsdiv .sector .type{
    color: rgba(255,255,255,0.5);
}



#star_list{position:absolute;top: 60px;right: -40%;z-index: 1;
    bottom: 15px; background-color: rgba(0,0,0,0.65);padding: 15px;display: none;
    width: 350px;
    animation:showBox 150ms linear 1 alternate;
    
    }
#star_list:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
#star_list:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  






#star_list.visible {
    right: 10px;
    display: block;
}







#star_list h1{

    height: 37px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
    box-sizing: border-box;

    line-height: 37px;
    
    text-decoration: none;
    font-size: 17px;
    font-weight: normal;

    text-align: center;
    margin: 0px;

}



#star_list .content {
    position: absolute;
    top: 70px;
    bottom: 0px;
    right: 0px;
    left: 0px;

}

#star_list .content .stars{
    width: calc(100% - 10px);
    margin-left: 10px;
    font-size: 13px;
    color: white;
    box-sizing: border-box;
    border-spacing: 0px;
    border-collapse: separate;
}


#star_list .content .stars th{
    background-color: white;
    font-weight: bold;
    color: black;
    text-align: left;
    padding-left: 5px;
}

#star_list .content .stars td{
    color: white;
    text-align: left;
    padding-left: 5px;
    cursor: pointer;

}

#star_list .content .stars tr:hover {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;
}

#star_list .content .stars tr:hover td {
    color: black;
    font-weight: bold;
}








.mainbanner {
   display: block;
   margin: 5% 50px 0px 50px;
   
  
}

.mainbanner h1 {
    font-size: 70px;
    font-weight: normal;
    line-height: 50px;
    text-align: center;

    text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
    color: rgba(255,255,255,0.60);
    text-transform: uppercase;
    letter-spacing: 20px;
    padding: 0px;
    margin: 0px;
}


@media (max-width: 520px) { 
    .mainbanner {
       display: none;
    }
}



/*
.info {
    display: block;
    position: relative;
    margin: 0px auto;
    width: 500px;
    padding: 20px 20px 20px 20px;
    background: rgba(0,0,0,0.65);
    text-align: center;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    color: rgb(232,250,17);

    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;
    animation:highlited 500ms linear infinite;
}



.info:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.info:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  

*/


.create_organisation {
    display: block;
    position: relative;
    top: 60px;
    margin: 0px auto 70px;
    max-width: 500px;
    width: 90%;
    padding: 20px 20px 20px 20px;
    background: rgba(0,0,0,0.65);
    color: white;
    text-align: center;
    box-sizing: border-box;
}

.create_organisation:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.create_organisation:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  


.create_organisation input,
.create_organisation textarea  {
    width: 100%;
    text-align: left;

}
.create_organisation .text {
    font-size: 15px;
    margin: 0px;
    padding: 10px 0px;
    font-weight: normal;
    color: rgba(255,255,255,0.9);
    background-color: transparent;
   
}

.create_organisation .text small {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}

.create_organisation table  {
    width: 100%;
}

.create_organisation table th {
    text-align: right;
    padding-right: 10px;
    color: white;
}

.create_organisation table td {
   width:75%;
}

.create_organisation table th.button,
.create_organisation table td.button {
    padding-top: 20px;
    text-align: right;
}

.create_organisation table td textarea {
    margin: 5px 0px;
}

.create_organisation .notice {
    display: block;
    margin: 5px 0px;
    text-align: justify;
    font-size: 13px;
}

.subbanner {
    position: absolute;
    top: 300px;
    left: 20px;
    right: 20px;
    bottom: 45px;
    box-sizing: border-box;
}

@media (max-width: 520px) { 
    .subbanner {
       position: relative;
       width: 90%;
       margin: 10px auto 100px;
       top: auto; 
       left: auto; 
       right: auto; 
       bottom: auto; 
    }
}

.orglist {
    display: block;
    position: absolute;
    width: 32%;
    
    
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
    background-color: rgba(0,0,0,0.65);
    box-sizing: border-box;
    bottom: 0px;

}


 

.orglist .oglist_in {
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow-y: hidden;
}

@media (max-width: 520px) { 
    .orglist .oglist_in {
        height: auto;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        overflow-y: auto;
    }
}

.orglist.new_orgs {
    top: 0px;
    left: 0px;
}

.orglist.notices {
    top: 0px;
    right: 0px;
    overflow-y: hidden;
}

.orglist.notices .oglist_in {
    overflow-y: visible;
}

.orglist.top_orgs {
    top: 0px;
    left: calc(50% - 16%);
}

.orglist .page {
    top: -30px;
}
      

.orglist .plist_in {
    position: absolute;
    min-height: 400px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}


@media (max-width: 520px) { 
    .orglist {
       position: relative;
       width: auto;
       margin: 10px auto;
       float: none;
       top: auto; 
       left: auto; 
       right: auto; 
       bottom: auto; 
    }
    .orglist.new_orgs {
       top: auto; 
       left: auto; 
       right: auto; 
       bottom: auto; 
    }
    
    .orglist.notices {
       top: auto; 
       left: auto; 
       right: auto; 
       bottom: auto; 
    }
    
    .orglist.top_orgs {
       top: auto; 
       left: auto; 
       right: auto; 
       bottom: auto; 
    }
    
    
}

.orglist_header {
    display: block;
    left: 0px;
    right: 0px;
    font-size: 30px;
    color: white;
    padding: 20px 0px;
    box-sizing: border-box;  
    text-transform: uppercase;

    text-decoration: none;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
}


.orglist table {
    position: relative;
    width: 100%;
    color: white;
    box-sizing: border-box;
    border-spacing: 0px;
    border-collapse: separate;
    font-size: 12px;
}

.orglist table th {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-left: 5px;
    text-align: left;
    font-size: 13px;
    font-weight: normal;

}

.orglist table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    padding: 5px;
    cursor: pointer;
}

.orglist table tr:hover td {
    background-color: rgba(255,255,255,0.1);
}

.orglist table tr td.oid {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    text-align: right;
}
.orglist table tr td.odate {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    text-align: left;
}





.orglist .plist_in .post .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    opacity: 0.1;
}

.orglist .plist_in .post .close:hover {
    opacity: 0.9;
}


.orglist .plist_in .post .porg:hover {

    text-decoration: underline;
} 







.org_plist_in {
    width: 48%;
    box-sizing: border-box;
    float: right;
        position: relative;
}

.org_plist_in .org_news_list {
    position: relative;
} 



.org_plist_in .org_news_list .orglist_header {
    top: 0px;
} 

.org_news_list .plist_in {
    padding-top: 30px;
}
.org_news_list .plist_in .post,
.orglist .plist_in .post {
    position: relative;
    padding: 0px 0px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;


}


.org_news_list .plist_in .scroll {
    position: relative;
    overflow: visible;
} 



.org_plist_in .org_news_list .post {
    border-bottom: 1px solid rgba(0, 150, 175, 0.2);
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    padding: 15px 20px 15px;
    color: white;
    position: relative;
}  

.org_plist_in .org_news_list .post .pdate,
.orglist .plist_in .post .pdate {
    display: block;
    position: absolute;
    top: 0px;
    left: 10px;
    font-size: 15px;
    color: rgba(255,255,255,0.5);

} 

.org_plist_in .org_news_list .post .porg,
.orglist .plist_in .post .porg {
    font-size: 20px;
    
    color: rgba(255,255,255,0.4);
    text-shadow: initial;

} 

.org_plist_in .org_news_list .post .pauthor,
.orglist .plist_in .post .pauthor {
    font-size: 15px;
    color: rgba(255,255,255,0.4);
    text-shadow: initial;
    cursor: pointer;
} 

.org_plist_in .org_news_list .post .porg:hover,
.orglist .plist_in .post .pauthor:hover {

    text-decoration: underline;
} 



.org_plist_in .org_news_list .post .ptitle,
.orglist .plist_in .post .ptitle {
    display: block;
    font-size: 24px;
    color: white;
    padding: 20px 0px 0px 10px;

    text-transform: uppercase;
}  

.org_plist_in .org_news_list .post .ptext,
.orglist .plist_in .post .ptext {
    display: block;
    font-size: 14px;
    color: white;
    padding: 5px 40px 0px 30px;

}


@media (max-width: 520px) { 
    .org_plist_in {
        width: auto;
        box-sizing: border-box;
        float: none;
        position: relative;
    }
} 

.newpost table {
   margin: 5px auto;
   width: 90%;
} 

.newpost table td {
   padding: 5px;
} 

.newpost input{
   text-align: left;
   text-shadow: initial;
   width: 100%;
}

.newpost textarea{
   text-align: left;
   text-shadow: initial;
} 
.newpostbutton {
    padding: 0px 10px 10px;
    text-align: right;
}

.org_plist_in .org_news_list .post .close {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    opacity: 0.1;
}

.org_plist_in .org_news_list .post .close:hover {
    opacity: 0.9;
}
.legal {
    width: 100%;
    margin: 0px auto 0px;
    padding: 30px 0px 60px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    
}

.legal p {
    display: block;
    color: rgba(255,255,255,0.3);
    font-size: 14px;
    text-align: center;
    padding: 0px 20px 0px;
    margin: 0px;
}

.legal a {

    color: rgba(255,255,255,0.5);
    text-decoration: underline;
}



.about {
    width: 100%;
    margin: 0px auto 0px;
    box-sizing: border-box;
    position: relative;
    background-image: linear-gradient(360deg, rgb(0 102 204 / 64%) -17%, rgb(0 0 0 / 36%) 57%),url(recruit_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,center;
    border-bottom: 1px solid rgb(154 223 255 / 43%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 60%), 0 8px 32px rgb(0 0 0 / 40%);

}


#bckgVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}


.about .icontainer {
    /*background-image: url('woman_bckg.png');*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 595px;
}


.icontainer {
    color: white;
    width: 80%;
    max-width: 1100px;
    margin: 0px auto 0px;
    box-sizing: border-box;
    position: relative;

}

.about .logo {
    width: 550px;
    height: 94px;
    position: absolute;
    box-sizing: border-box;
    background-image: url(main-logo.png);
    background-size: contain;
    background-position: center;
    left: calc(50% - 275px);
    top: 60px;
    animation: crt 5000ms linear infinite;
    background-repeat: no-repeat;
    
}


.about .play {
    width: 220px;
    position: absolute;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    color: black;
    left: calc(50% - 110px);
    bottom: 95px;
    bottom: 165px;
    height: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    cursor: pointer;
    z-index: 1;
}

.about .play:after {
    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #ffbc00;
    color: black;
    -webkit-clip-path: var(--clip_button);
    clip-path: var(--clip_button);
    cursor: pointer;
    z-index: -1;
    /*animation: highlited 500ms linear infinite;*/

}

.about .play:hover {
    animation: none;

}

.about .play:hover:after {
    animation: blink 100ms linear 2;
    background-color: white;
}



.about .server-info {
    display: block;
    position: absolute;
    box-sizing: border-box;
    color: #c8c8c8;

    right: 5px;
    bottom: 15px;
    font-weight: normal;
    text-align: right;
    font-size: 12px;
}

.about .play .buying-info {
    display: block;
    position: absolute;
    box-sizing: border-box;
    color: #c8c8c8;
    left: -45px;
    right: -45px;
    bottom: -43px;
    font-weight: normal;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
}

.about .image {
    width: 500px;
    position: absolute;
    box-sizing: border-box;
    background-image: url(img_about_spacestation.jpg);
    background-size: cover;
    background-position: center;
    left: 0px;
    bottom: 30px;
    height: 290px;
    -webkit-clip-path: var(--clip_win_new);
    clip-path: var(--clip_win_new);
}

.about .text {
    color: white;
    box-sizing: border-box;
    left: 20px;
    right: 20px;
    position: absolute;
    text-align: center;
    top: 190px;
}



.about .text h2 {
    line-height: 29px;
    display: block;
    color: #cce6ff;
    padding: 0px 0px;
    font-size: 21px;
    margin: 26px 0px 0px;

    text-transform: uppercase;
    font-weight: normal;
}

.about .text h1 {
    display: block;
    color: rgba(250,250,250,0.9);
    text-transform: uppercase;
    box-sizing: border-box;
    line-height: 36px;
    text-decoration: none;
    margin: 0px 0px 0px;
    font-size: 29px;
    font-weight: normal;
    padding: 0px;
}

.about .text h3 {
    line-height: 21px;
    display: block;
    color: rgba(255,255,255,1);
    padding: 0px 0px;
    font-size: 13px;
    margin: 0px 0px 10px;

    text-transform: uppercase;
    font-weight: normal;
}

.container {
    padding: 0px 0px 250px;
    overflow-y: hidden;
}

.categorydetail {
    width: 100%;
    margin: 0px auto 0px;
    padding: 0px 0px 50px;
    box-sizing: border-box;
    position: relative;

    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,center;
}
.categorydetail .images {
    text-align: center;
       
}

.categorydetail .images .image {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
}

.categorydetail .images .image .info{
    display: block;
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 3px 5px;
        background-color: black;
        color: white;
        font-size: 11px;
        text-decoration: none;

}

.categorydetail .videos {
    text-align: center;
       
}

.categorydetail .videos .video {
    display: inline-block;
        width: 150px;
        height: 150px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        position: relative;
}

.categorydetail .videos .video .info{
   display: block;
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 3px 5px;
        background-color: black;
        color: white;
        font-size: 11px;
        text-decoration: none;

}

.changelog {
    max-width: 1100px;
    margin: 0px auto;
    box-sizing: border-box;
    
    padding: 0px 20px;
    position: relative;
    
}

.changelog ul.timegrid {
    width: auto;
    margin: 0px;
    box-sizing: border-box;
    
    padding: 0px;
    position: relative;
    
   
}

.changelog ul.timegrid:before { 
    content:''; 
    display: block;  
    position: absolute; 
    top: -20px; 
    left: 4px; 
    bottom: -20px;
    width: 1px;
    border-left: 1px dotted var(--historyline_color);
}  

.changelog ul.timegrid li.timegriditem {
    list-style-type: none;
    display: block;
    position: relative;
    min-height: 45px;
    margin: 0px 0px 30px 0px;
    padding: 20px 0px 0px;;
    overflow: hidden;
    
    
}

.changelog ul.timegrid li.timegriditem:before { 
    content: '';
    display: block;
    position: absolute;
    top: 00px;
    left: 2px;
    height: 10px;
    width: 30%;
    min-width: 200px;
    /* opacity: 0.5; */
    background-image: linear-gradient(0deg,var(--historyline_color) 0%, var(--historyline_color) 100%), linear-gradient(90deg, var(--historyline_color) 0%, rgba(0,0,0,0) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 5px 5px, 100% 1px;
    background-position: 0px 0px, 0px 2px;
} 



.changelog ul.timegrid li.timegriditem .time-formated {
    
    display: block;
    position: absolute;
    top: 17px;
    left: 20px;
    color: rgb(139,172,211);
    font-size: 13px;
    line-height: 18px;
}

.changelog ul.timegrid li.timegriditem .time-formated small {
    font-size: 13px;
    display: block;
    
}

.changelog ul.timegrid li.timegriditem .tags {
    
    display: block;
    margin: 0px 0px 10px 180px;
}

.changelog ul.timegrid li.timegriditem .content {
    
    display: block;
    margin-left: 180px;
}

.changelog ul.timegrid li.timegriditem .content .title {
    font-size: 22px;
    display: block;
   
}

.changelog ul.timegrid li.timegriditem .content .html {
    
    display: block;
   
}

.changelog p {
    margin: 20px 0px;
    
   
}

.changelog ul:not(.timegrid) {
    margin: 20px 0px;
    list-style-type: square;
   padding-inline-start: 18px;
}

.changelog ul:not(.timegrid) li:not(.timegriditem) {
    margin: 15px 0px;
    
   
}

.historylist {
    max-width: 1100px;
    margin: 0px auto;
    box-sizing: border-box;
    
    padding: 0px 20px;
    position: relative;
    
}

.historylist ul {
    width: auto;
    margin: 0px;
    box-sizing: border-box;
    
    padding: 0px;
    position: relative;
    
   
}

.historylist ul:before { 
    content:''; 
    display: block;  
    position: absolute; 
    top: -20px; 
    left: 4px; 
    bottom: -20px;
    width: 1px;
    border-left: 1px dotted var(--historyline_color);
}  

.historylist ul li {
    list-style-type: none;
    display: block;
    position: relative;
    min-height: 45px;
    margin: 0px 0px 30px 0px;
    padding: 20px 0px 0px;;
    overflow: hidden;
    
    
}

.historylist ul li:before { 
    content: '';
    display: block;
    position: absolute;
    top: 00px;
    left: 2px;
    height: 10px;
    width: 30%;
    min-width: 200px;
    /* opacity: 0.5; */
    background-image: linear-gradient(0deg,var(--historyline_color) 0%, var(--historyline_color) 100%), linear-gradient(90deg, var(--historyline_color) 0%, rgba(0,0,0,0) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 5px 5px, 100% 1px;
    background-position: 0px 0px, 0px 2px;
} 



.historylist ul li .time-formated {
    
    display: block;
    position: absolute;
    top: 17px;
    left: 20px;
    color: rgb(139,172,211);
    font-size: 13px;
    line-height: 18px;
}

.historylist ul li .time-formated small {
    font-size: 13px;
    display: block;
    
}

.historylist ul li .content {
    
    display: block;
    margin-left: 180px;
}

.historylist ul li .content .title {
    font-size: 22px;
    display: block;
   
}

.historylist ul li .content .html {
    
    display: block;
   
}

.tlist {
    max-width: 1100px;
    margin: 0px auto;
    box-sizing: border-box;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 0px;
}

.tlist.cards_catalog {
    max-width: 1100px;
    margin: 0px auto;
    box-sizing: border-box;
    display: grid;
    grid-gap: 10px;
    
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    padding: 0px;
}

@media (max-width: 520px) { 
    .tlist  {
          display: block !important;
          
    }
    
}

.tlist .cardcatalogitem{
    text-align: center;
    text-decoration: none;
    padding: 5px 0px 40px;
    display: block;
}

.tlist .cardcatalogitem .ck_karta .imgcard{
    height: 250px;
}

.tlist .cardcatalogitem .ck_name{
    padding: 10px 0px;
    display: block;
}


.tlist ul {
    
}

.tlist ul li {
    
}

.tags {
    margin: 0px 2px;
}

.tags .tag {
    display: inline-block;
    background-color: #979797;
    color: black;
    font-size: 10px;
    margin: 2px;
    padding: 2px 5px;
    font-family: var(--fontFaimly_button);
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 14px;
}

.tlist ul .letter-box {
    
}



.tlist ul .letter-box .letter-value {
    font-size: 30px;
}

.tlist ul li ul {
    display: block;
}

.barbox {
    position: relative;
    width: 200px;
    height: 7px;
    border-left: 2px solid rgb(180,180,180);
    border-right: 2px solid rgb(180,180,180);
    background-color: rgb(40,40,40);
    margin: 3px auto;
}

.barbox .bar {
    position: absolute;
    width: 0%;
    
    left: 0px;
    top: 0px;
    bottom: 0px;
    
    background-color: rgb(255,255,255);
}

.textbox {
    max-width: 1100px;
    margin: 0px auto;
    box-sizing: border-box;
    display: block;
    padding: 0px 20px 40px;
    clear: both;
    line-height: 22px;
}



.textbox .parametterst {
    width: 100%;
    border-spacing: 0px;
   
}

.textbox .parametterst th {
   padding: 5px;
   text-align: right; 
}

.textbox .parametterst td {
   padding: 5px;
   border-bottom: 1px solid rgba(255,255,255,0.1);
   text-align: right;
}

.textbox .parametterst td.item-needed-qty {
   color: white;
   font-size: 12px;
   white-space: nowrap;
   text-align: right;
}

.textbox .parametterst th.name,
.textbox .parametterst td.name{
   
   
   text-align: left;
}

.textbox p {
    margin: 10px 0px 10px;
    
}

.textbox .ck_karta {
    text-align: center;
    padding: 20px;
    margin: 0px;
    box-sizing: border-box;
}



.textbox .ck_karta canvas {
    max-width: 180px;
    width: 100%;
}


.textbox img {
    max-width: 100%;
    
}

.textbox img.fleft,
.textbox .imgframe.fleft{
    float: left;
    margin: 5px 20px 20px 0px;
    text-align: left;
}

.textbox img.fright,
.textbox .imgframe.fright{
    float: right;
    margin: 5px 0px 20px 20px;
    text-align: right;
}

.textbox img.fcenter,
.textbox .imgframe.fcenter{
    float: none;
    margin: 5px 0px 20px 0px;
    text-align: center;
}


.textbox .step{
    font-size: 32px;
    text-align: center;
    color: white;
    margin: 21px auto 10px;
}

.textbox .imgframe span.imgtext {
    display: block;
    font-size: 13px;
    font-style: italic;
    max-width: 100%;
    padding: 3px 0px 0px;
    text-align: center;
    color: #c0c0c082;
}


.textbox p.hint {
    border: 1px solid #436080;
    padding: 11px 13px 11px 60px;
    border-radius: 5px;
    display: block;
    max-width: 350px;
    margin: 10px auto;
    position: relative;
    background-color: #13232f;
    font-size: 14px;
    font-style: italic;
    clear: both;
}

.textbox p.hint:before {
    content: '';
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    background: transparent url(ico/lightbulb-2-48.png) center no-repeat;
    background-size: 22px; 
    opacity: .65;
}

.textbox p.showmore {
   
    padding: 11px 48px 11px 5px;
    
    display: block;
    
   
    position: relative;
    text-align: right;
    font-size: 14px;
    
    clear: both;
}

.textbox p.showmore:before {
    content: '';
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    background: transparent url(ico/arrow-31-32.png) center no-repeat;
    background-size: 22px; 
    opacity: .3;
}

.textbox .columns2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 60px;
}

@media (max-width: 520px) { 
    .textbox .columns2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.textbox .columns2 .column {
    padding: 0px 0px;
}


.textbox .columns3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 60px;
}

@media (max-width: 520px) { 
    .textbox .columns3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.textbox .columns3 .column {
    padding: 0px 0px;
}

.textbox .columns4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 60px;
}

@media (max-width: 520px) { 
    .textbox .columns4 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.textbox .columns4 .column {
    padding: 0px 0px;
}

.textbox .columns5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 60px;
}

@media (max-width: 800px) { 
    .textbox .columns5 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 520px) { 
    .textbox .columns5 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.textbox .columns5 .column {
    padding: 0px 0px;
}


.textbox .hypercorporations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 60px;
    grid-row-gap: 60px;
}

@media (max-width: 520px) { 
    .textbox .hypercorporations {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.textbox .hypercorporations .hc_column {
    padding: 15px 0px 0px 0px;
    position: relative;
    background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(139,172,211) 100%),linear-gradient(180deg, rgb(139,172,211) 0%, rgba(0,0,0,0) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% 1px, 1px 100%;
    background-position: 0px 0px,100% 0px;
}

.textbox .hypercorporations .hc_column .hc_name {
    padding: 0px 60px 2px 0px;
    font-size: 20px;
    display: block;
}

.textbox .hypercorporations .hc_column .hc_logo {
    position: relative;
    display: block;
    text-align: center;
    height: 80px;
    
}

.textbox .hypercorporations .hc_column .hc_logo img {
    max-width: 66%;
    max-height: 66%;
    top: 50%;
    position: absolute;
    left: calc(50% - 10px);
    transform: translateX(-50%) translateY(-50%);
}
.textbox .hypercorporations .hc_column .hc_index {
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    text-align: right;
    white-space: nowrap;
    font-size: 11px;
    background-color: rgb(139,172,211);
    color: black;
    padding: 1px 5px;
    font-weight: bold;
}

.textbox .hypercorporations .hc_column .hc_type {
    padding: 0px 20px 5px 0px;
    font-size: 12px;
    display: block;
}

.textbox .hypercorporations .hc_column .hc_description {
    padding: 10px 20px 15px 0px;
    display: block;
}

.textbox .hypercorporations .hc_column .hc_description .more {
    padding: 10px 10px 0px 0px;
    text-align: right;
    display: block;
}

.textbox .hypercorporations .hc_column .hc_subtitle {
    padding: 0px 0px 5px 0px;
    margin: 0px 2px;
    display: block;
    font-size: 11px;
    
}

.textbox .hypercorporations .hc_column .stations {
    margin: 0px 2px;
}

.textbox .hypercorporations .hc_column .stations .station {
    display: inline-block;
    background-color: silver;
    color: black;
    font-size: 12px;
    margin: 2px;
    padding: 2px 8px;
    font-family: var(--fontFaimly_button);
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
}

.subblocks {
    max-width: 1100px;
    margin: 0px auto 38px;
    box-sizing: border-box;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 0px 20px;
    
}


.subblocks .block {
    position: relative;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.6));
    
    
    text-decoration: none;
    
    min-height: 160px;
}

.subblocks .block:before {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
   
    background-color: rgb(154 223 255 / 43%);
    clip-path: var(--clip_win_new);
    
}

.subblocks .block:hover {
    animation: none;
   
}



.subblocks .block .box-inner {
    position: relative;
    padding: 10px 25px 25px 25px;
    text-shadow: var(--shadow_textfull);
    min-height: 100%;
    box-sizing: border-box;
    clip-path: var(--clip_win_new);
}

.subblocks .block:after {
    box-shadow: inset 0 0 40px rgb(0 102 204 / 30%), inset 0 0 160px rgb(0 102 204 / 20%);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
    
    clip-path: var(--clip_win_new);
}

.subblocks .block:hover .box-inner:after {
    box-shadow: inset 0 0 50px rgb(0 102 204 / 40%), inset 0 0 180px rgb(0 102 204 / 30%);
    
}

.subblocks .block .box-inner .img{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    
    clip-path: var(--clip_win_new);
}

.subblocks .block:hover .box-inner .img {
    
    
    animation: crt 5000ms linear infinite;
    
    filter:grayscale(40%) brightness(50%) contrast(110%);
}



.subblocks .block .headtext h2 {
    font-size: 22px;
    padding: 0px ;
    text-align: left;
}


.topics {
    width: 100%;
    margin: 0px auto 0px;
    padding: 30px 0px;
    box-sizing: border-box;
    position: relative;
    max-width: 1100px;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,center;
}

.topics .blocks {
    
    margin: 0px auto;
    box-sizing: border-box;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 0px 20px;
}

.blist{
    max-width: 1100px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 0px 20px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 0px;
}

.blist ul{
    
    padding-top: 0px;
    margin-top: 0px;
}


.topics .blocks .box {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 120px;
    cursor: pointer;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.6));
    margin-bottom: 20px;
}

.topics .blocks .box:hover {
    animation: none;
}

.topics .blocks .box h3 {
    font-family: var(--fontFaimly_header);
    display: block;
 
    box-sizing: border-box;
    text-decoration: none;
    font-size: 22px;
    font-weight: normal;
    padding: 20px 0px;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}

.topics .blocks .box:before {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: rgb(154 223 255 / 43%);
    -webkit-clip-path: var(--clip_win_new);
    clip-path: var(--clip_win_new);
}

.topics .blocks .box .box-inner {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-clip-path: var(--clip_win_new);
    clip-path: var(--clip_win_new);
    overflow: hidden;
    
}

.topics .blocks .box .box-inner:after {
    box-shadow: inset 0 0 40px rgb(0 102 204 / 30%), inset 0 0 160px rgb(0 102 204 / 20%);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.topics .blocks .box .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: cover;
    background-position: center;

}





.topics .blocks .box .upslider p {
    color: rgba(255,255,255,.75);
    padding: 0px;
    margin: 0px;
    text-align: left;
    font-size: 15px;
}

.topics .blocks .box:hover .img {
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    position: absolute;
    background-size: cover;
    background-position: center;
    animation: crt 5000ms linear infinite;
    z-index: -1;
    filter:grayscale(40%) brightness(50%) contrast(110%);
}

.topics .blocks .box .headtext {
    position: absolute;
    top: 37px;
    left: 5px;
    right: 5px;
    text-align: center;
}

.topics .blocks .box .headtext h2 {
    color: #b3dfff;
    font-size: 24px;
    text-shadow: var(--shadow_textfull);
    font-weight: normal;
    padding: 0px;
    margin: 0px auto;
    font-family: var(--fontFaimly_header);
}

@media (max-width: 950px) { 
    
    .icontainer {
        width: unset;
        max-width: unset;
    }
    
    .about .icontainer {
    background-image: unset;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    position: relative;
    height: unset;
    padding: 60px 0px 30px;
    }
        
    .about {

    }
    
    .about .logo {
    width: 400px;
    height: 65px;
    position: relative;
    margin: 0px auto 0px;
    box-sizing: border-box;
    background-image: url(main-logo.png);
    background-size: contain;
    background-position: center;
    animation: crt 5000ms linear infinite;
    background-repeat: no-repeat;
    padding: 0px;
    animation: none;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
        
    }
    
    .about .text {
    width: 80%;
    margin: 40px auto 45px;
    position: relative;
    box-sizing: border-box;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
        
    }
    .about .play {
    width: 80%;
    margin: 40px auto 85px;
    position: relative;
    box-sizing: border-box;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;

    }
    
    .vision {
        width: 90%;
        margin: 30px auto;
    }
    
    
   

}








.story {
    color: white;

    font-size: 13px;
    margin: 0px auto;

}

.story.left {
    float: left;
    margin: 0px 1%  0px 9%;
}

.story.right {
    float: right;
    margin: 0px 9% 0px 1%;
}

.story .hit {

    background-size: cover;
    background-position: top;
    margin: 0px;
    box-sizing: border-box;
    background-attachment: fixed;
}

.story .hit,
.story .hit .md-box {
    min-height: 450px;
 }
.story .hit.last,
.story .hit.last .md-box {
    min-height: 950px;

}

.story .hit .md-box {
    padding: 0px;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    height: 100%;
    text-align: center;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.story .hit .md-box.first {
    background: rgba(0, 0, 0, 0);
}



.story .hit h1 {
    display: block;
    width: 50%;
    min-width: 400px;
    text-align: center;
    font-size: 39px;

    font-weight: normal;
    line-height: 41px;
    text-shadow: 0px 0px 10px rgb(0,255,255);
    padding: 0px;
    margin: 0px auto;
    min-height: 125px;
    position: relative;
}

.story .hit h1 span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    right: 0px;
    letter-spacing: 5px; 
}
.story .hit .subtitle,
.story .hit .subtitle2,
.story .hit .subtitle3 {
    display: block;
    width: 50%;
    min-width: 400px;
    margin: 0px auto;
    padding: 8px 0px;

    text-align: justify;
    text-shadow: 0px 0px 10px rgb(0,255,255)
}


.story .hit .subtitle {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 23px;
}

.story .hit .subtitle2 {
    font-size: 14px;
    line-height: 23px;
}

.story .hit .subtitle3 {
    font-size: 12px;
    line-height: 23px;
}

.story .hit .more {
    position: relative;
    display: block;
    height: 30px;
    transition: 0.2s linear;
    overflow: hidden;
    padding: 30px 10px 0px;
    box-sizing: border-box;
    text-align: center;
}

.story .hit .more:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);

    filter: blur(2px);
    cursor: pointer;
}
.story .hit .more:after {
    content: "VIEW DETAILS";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 30px;
    font-size: 10px;
    color: rgba(0,255,255,0.4);
    text-align: center;
    text-shadow: 0px 0px 3px rgba(0,255,255,0.5);
    cursor: pointer;
    line-height: 30px;
    /* font-weight: bold; */
    letter-spacing: 3px;
}


.story .hit .more:hover {    
    height: 330px;
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0, 50, 75, 0.9) 50%,rgba(0, 50, 75, 0) 100%); 
}

.story .hit .more.noimg:hover {    
    height: 200px; 
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0, 50, 75, 0.9) 50%,rgba(0, 50, 75, 0) 100%); 
}

.story .hit .more > * {    

}

.story .hit .more:hover > * {

    
}

.story .hit .more:hover:before,
.story .hit .more:hover:after {
    display: none;
}


.block-parallax-1,
.block-parallax-2,
.block-parallax-3 {
    overflow: hidden;
    position: relative;
}
.parallax-bg {
    background-attachment: fixed;
    background-position: 0px 0px;
    background-repeat: repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    min-width: 1170px;
    background-size: cover;
}


.block-parallax-1 .parallax-bg { 	
	background-image: url('aa_uni.jpg');
}

.block-parallax-2 .parallax-bg { 	
	background-image: url('stratospheric_colony_by_phade01-d7uvz6m.jpg');
}

.block-parallax-3 .parallax-bg { 	
	background-image: url('aa_ind.png');
}

.invite_dom_form {
    display: block;
    position: fixed;
    top: 50px;
    width: 400px;
    left: calc(50% - 200px);
    padding: 55px 0px 25px 0px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 50, 75, 1);
    box-sizing: border-box;
        z-index: 1000;
}

.invite_dom_form .input_div {
    display: block;
    position: relative;
    padding: 10px 20px;
}

.invite_dom_form .input_div input {
    width: 100%;
}

.invite_dom_form .input_div_submit {
    display: block;
    position: relative;
    padding: 10px 20px;
    text-align: right;
}

.invite_dom_form .input_div_text {
    display: block;
    position: relative;
    padding: 10px 20px;
    font-size: 17px;
    color: white;
    text-transform: uppercase;

    text-decoration: none;
    font-weight: normal;
    text-align: left;
}

.invite_dom_form .subtitle {
    position: relative;
    padding: 10px 20px 0px;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
    color: rgb(232,250,17);
    display: block;
    padding-top: 8px;
    text-shadow: none;
    letter-spacing: 0px;
    font-size: 20px;
}

.galleryslider {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    -webkit-clip-path: var(--clip_win_new);
    clip-path: var(--clip_win_new);

}

.galleryslider:before {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: rgb(154 223 255 / 43%);
    -webkit-clip-path: var(--clip_win_new);
    clip-path: var(--clip_win_new);
}

.galleryslider .view {
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: black;
    
    animation: crt 5000ms linear infinite;
}



.galleryslider .reel {
    position: absolute;
    bottom: 40px;
    left: 20px;
    right: 20px;

}   

.galleryslider .reel .ireel {
    width: calc(100% - 80px);
    margin: 5px auto;
   

}

.galleryslider .reel .ireel .owl-next{
    position: absolute;
    top: calc(50% - 25px);
    right: -55px;
    height: 50px;
    width: 50px;
    background:url('../../img/ico/arrow-24-32.png') center no-repeat;
    
}

.galleryslider .reel .ireel .owl-prev{
    position: absolute;
    top: calc(50% - 25px);
    left: -55px;
    height: 50px;
    width: 50px;
     background:url('../../img/ico/arrow-88-32.png') center no-repeat;
}

.galleryslider .reel .ireel .owl-prev.disabled,
.galleryslider .reel .ireel .owl-next.disabled
{
    opacity: .1;
}    

.galleryslider .reel .ireel .item {
    display:block;
    position: relative;
    height: 80px;
    width: 107px;  
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0px 10px 0px 0px;
    border: 1px solid rgb(154 223 255 / 43%);
    box-sizing: border-box;
}

.galleryslider .reel .ireel .item:after {
    box-shadow: inset 0 0 15px rgb(0 102 204 / 30%), inset 0 0 60px rgb(0 102 204 / 20%);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.galleryslider .reel .ireel .item:hover {
    animation: blink 100ms linear 2;
}



.line_buttons {        
    position: absolute;
    top: 0px;
    right: 0%;
    left: 0%;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    }

.line_buttons a{    
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
    }

.line_buttons a:hover{    
    border:1px solid white;
    color: rgba(255,255,255,1);

    animation:blink 100ms linear 2 alternate;
    }
    
.line_buttons a.active:hover{    
    border:1px solid rgba(255,255,255,0);
    color: white;

    animation:none;
    }

.line_buttons a.active{    

    color: white; 

  animation:highlited 500ms linear infinite;
    }



.org_help {
    display: block;
    position: absolute;
    left: calc(50% - 16%);
    top: 220px;
    width: 32%;
    padding: 15px 20px;
    background: rgba(0,0,0,0.65);
    color: white;
    text-align: center;
    box-sizing: border-box;
}

.org_help a {
    color: rgb(238,233,119);

    text-decoration: none;
    text-transform: uppercase;
    font-size: 25px;
    animation: highlited 500ms linear infinite;
    text-shadow: rgb(255,213,182) 0px 0px 4px;
}

.org_help:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.org_help:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  




.owl-controls {
	text-align: center;

}
.owl-controls .owl-nav [class*=owl-] {
	color: #fff;
	font-size: 14px;
	margin: 5px;
	padding: 4px 7px;
	background: rgba(255,255,255,0.3);
	display: inline-block;
	cursor: pointer;

}
.owl-controls .owl-nav [class*=owl-]:hover {
	background: #869791;
	color: #fff;
	text-decoration: none
}
.owl-controls .owl-nav .disabled {
	opacity: .5;
	cursor: default
}
.owl-dots .owl-dot {
	display: inline-block;
}
.owl-dots .owl-dot span {
	width: 5px;
  height: 20px;
  margin: 5px 4px;
  background: rgba(255,255,255,0.3);
  display: block;
}
.owl-dots .owl-dot.active span {
	background: rgba(255,255,255,1);
  box-shadow: inset 0px 0px 25px rgba(255,255,255,1), 0px 0px 25px rgba(255,255,255,1);
  animation:highlited 500ms linear infinite;
}

.owl-dots .owl-dot:hover span {
	background: rgba(255,255,255,1);
  animation:blink 100ms linear 2 alternate;
  
}        


.newpost {
    display: block;
    position: absolute;
    top: 50px;
    width: 400px;
    left: calc(50% - 200px);
    padding: 55px 0px 25px 0px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 50, 75, 1);
    box-sizing: border-box;
        z-index: 1000;
}

.newpost .input_div {
    display: block;
    position: relative;
    padding: 10px 20px;
}

.newpost .input_div input {
    width: 100%;
}

.newpost .input_div_submit {
    display: block;
    position: relative;
    padding: 10px 20px;
    text-align: right;
}

.newpost .input_div_text {
    display: block;
    position: relative;
    padding: 10px 20px;
    text-align: left;
    color: white;
}

.newpost .subtitle {
    display: block;
    position: relative;
    padding: 10px 20px 0px;
    text-align: left;
    color: gold;
    font-weight: bold;
}



.rewardsbox {

}


.rewardsbox .rl_name {
    display: block;
    font-size: 50px;
    color: rgb(4,193,193);
    padding: 10px 0px 10px;
    box-sizing: border-box;
    text-transform: uppercase;

    text-decoration: none;
    font-weight: normal;
    text-align: center;
    padding: 30px 0px;
}

.rewardsbox .rl_title {
    position: relative;

    padding: 20px 5px 3px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}



.rewardsbox .rl_rank {
    position: relative;
    display: block;
    margin: 0px auto 0px;
    background-size: 80px;
    background-repeat: no-repeat;
    background-position: bottom;

    text-align: center;
    padding: 0px 0px 80px;
    font-size: 20px;
    color: rgb(238,233,119);
    text-transform: uppercase;
}

.rewardsbox .rl_rewards{
    line-height: 21px;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    color: white;
    padding: 5px 0px;
}

.rewardsbox .rl_rewards .rl_reward{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0px 5px;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.rewardsbox .rl_rewards.next .rl_reward{
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0px 5px;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}


.rewardsbox .rl_rewards .rl_reward:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}

.rewardsbox .lu_title.next {
    position: relative;
    display: block;
    font-size: 30px;
    color: rgb(252,254,84);
    text-transform: uppercase;

    text-align: center;
}

.rewardsbox .lu_name.next {
    position: relative;
    display: block;
    margin: 0px auto 0px;
    background-size: 90px;
    background-repeat: no-repeat;
    background-position: bottom;

    text-align: center;
    padding: 0px 0px 90px;
    font-size: 20px;
    color: rgb(238,233,119);
    text-transform: uppercase;
}


.quest {
    display: block;
    position: relative;
    margin: 10px auto;
    max-width: 600px;
    width: 90%;
    padding: 20px 20px 20px 20px;
    background: rgba(0,0,0,0.65);
    text-align: center;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    color: rgb(232,250,17);

    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;

    z-index: 999;
}

.quest:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.quest:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.quest a {
    color: rgb(238,233,119);
    text-decoration: underline;
}




.rewardsbox .lu_rewards{
    line-height: 21px;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    color: white;
    padding: 5px 0px;
    margin: 10px auto 0px;
}

.rewardsbox .lu_rewards .lu_reward{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 70px;
    margin: 0px 5px;
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.rewardsbox .lu_rewards.next .lu_reward{
    position: relative;
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 0px 5px 10px;
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}


.rewardsbox .lu_rewards .lu_reward:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}









#registerscreen {     
    position: absolute;
    top: 88px;
    left: calc(50% - 187.5px);
    height: 690px;
    min-height: 600px;
    background-color: rgba(0,0,0,0.65);
    width: 375px;
 
}
#registerscreen:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
#registerscreen:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  



#registerscreen #hero_locker {
    position: relative;
    margin-top: 302px;
    line-height: 23px;
    background: linear-gradient(to right,rgba(103,223,237,0.0) 0%,rgba(103,223,237,0.4) 40%,rgba(103,223,237,0.4) 60%,rgba(103,223,237,0.0) 100%);
    height: 56px;
    font-weight: normal;
    text-align: center;
    font-size: 45px;
    color: white;
    padding: 0px;
    text-transform: none;
    text-shadow: 0px 0px 10px rgb(0,255,255);

    z-index: 1000000;
    padding: 12px 0px;
    text-transform: uppercase;
    animation: crt 10000ms linear infinite;
}


#registerscreen .race_title {
    position: relative;
    margin-top: 385px;
    line-height: 16px;
    height: 40px;
    font-weight: normal;
    text-align: center;
    font-size: 40px;
    color: white;
    padding: 0px;
    text-transform: none;

    z-index: 1000000;
    padding: 12px 0px;
    text-transform: uppercase;
    white-space: nowrap;
    /* background-image: linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5)), linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5)); */
    /* background-size: 2px 2px; */
    /* background-position: 0 0, 0px 0px; */
    color: black;
    background: white;
    overflow: hidden;
}

#registerscreen.locked .race_title {
    animation: blink 100ms linear 2;
}


#registerscreen .race_title span{
    display: block;
    font-size: 20px;
    padding-top: 10px;
}

#registerscreen .races{
    position: absolute;
    top: 65px;
    text-align: center;
}



#registerscreen .races .race{
    position: relative;
    width: 314px;
    height: 320px;
    margin: 0px auto 0px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    background-blend-mode: overlay;
    background-color: rgb(92, 83, 100);
    animation: crt 10000ms linear infinite;
    filter: grayscale(100%) brightness(130%) contrast(110%);

    
}
 /*
#registerscreen .races .race:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(to top, rgba(255,255,255,0.01) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.015) 75%, rgba(1,255,255,0.5)), linear-gradient(to top, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5)); 
    background-size: 10px 10px;
    background-position: 0 0, 0px 0px;

}        */
#registerscreen.locked .races .race{
    filter: grayscale(100%) brightness(160%);
    background-blend-mode: hard-light;
}            

#registerscreen .owl-next{
    position: absolute;
    top:328px;
    right: 15px;
    height: 50px;
    width: 50px;
    background:url('../../img/ico/arrow-24-32.png') center no-repeat;
    
}

#registerscreen .owl-prev{
    position: absolute;
    top: 328px;
    left: 15px;
    height: 50px;
    width: 50px;
     background:url('../../img/ico/arrow-88-32.png') center no-repeat;
}

#registerscreen .owl-prev.disabled,
#registerscreen .owl-next.disabled
{
    opacity: .1;
}


#registerscreen #perks{
    margin: 18px 0px 15px;
    line-height: 21px;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    color: white;
    padding: 0px;
    z-index: 1000000;
}



.perk{
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0px 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    background-color: black;
    border: 2px solid black;
    box-sizing: border-box;
}

.perk:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}


.perk.selected{
    animation: highlited 500ms linear infinite;
    filter: grayscale(100%);
    border: 2px solid rgb(230,220,47);
}

div.descr_perk{display:inline;outline:none;position: relative;}

div.descr_perk span.upper{
    z-index: 10000;
    visibility: hidden;
    padding: 10px 10px 18px;
    position: absolute;
    background-color: rgba(50,50,50,1);
    width: 200px;
    min-height: 90px;
    top: 30px;
    left: calc(50% - 100px);
    box-sizing: border-box;
    cursor: pointer;


}
div.descr_perk:hover span.upper{visibility:visible;animation:blink 100ms linear 2 alternate;}
div.descr_perk span.upper .perk_icon{
    height: 80px;
    width: 80px;
    position: absolute;
    top: -65px;
    left: calc(50% - 40px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(50,50,50,1);
    border: 10px solid rgba(50,50,50,1);
    box-sizing: border-box;
}
    
div.descr_perk span.upper .perk_title{
    display: block;
    margin-top: 5px;
    color: rgb(4,193,193);
    padding: 5px 0px 0px;
    display: block;
    text-transform: uppercase;
    font-size: 25px;

}
    
div.descr_perk span.upper .perk_numbers{
    color: rgb(238,233,119);
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 13px;
    padding: 7px 0px 11px;
}


div.descr_perk span.upper .perk_more{
    position: relative;
    text-align: center;
    border: 0px;
    background-color: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 6px 20px;
    font-size: 20px;

    font-weight: normal;
    line-height: 30px;
    text-transform: none;
    height: 30px;
    box-sizing: border-box;
}


div.descr_perk span.upper .perk_more::first-letter {
    color: rgb(4,193,193);
}
    
div.descr_perk span.upper .perk_desc {
    color: rgba(255,255,255,0.9);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 15px;
}

div.descrtooltip{display:inline;outline:none;position: relative;}
div.descrtooltip strong{line-height:16px;}
div.descrtooltip:hover{text-decoration:none; }
div.descrtooltip span.upper{
    z-index: 10000;
    visibility: hidden;
    padding: 10px 10px 18px;
    position: absolute;
    background-color: rgba(50,50,50,1);
    width: 220px;
    min-height: 90px;
    top: 10px;
    left: calc(50% - 110px);
    box-sizing: border-box;
    text-align: center;
}

div.descrtooltip span.upper:after{
    content: '';
    position: absolute;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(50,50,50,1);
    border-top: none;
    width: 0px;
    top: -22px;
    left: calc(50% - 10px);
    height: 12px;
}
div.descrtooltip:hover span.upper{visibility:visible;animation:blink 100ms linear 2 alternate;}
div.descrtooltip span.upper a{color:rgb(238,233,119);text-decoration:underline; max-width: 250px;}
div.descrtooltip span.upper span.ab_title   {
    color: rgb(4,193,193);
    padding: 5px 0px 0px;
    display: block;
    text-transform: uppercase;
    font-size: 25px;

    }
div.descrtooltip span.upper span.ab_numbers {       
    color: rgb(238,233,119);
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 13px;
    padding: 7px 0px 11px;

    }
div.descrtooltip span.upper span.ab_desc    {    
    color: rgba(255,255,255,0.9);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 15px;
    }
#registerscreen #description{
    text-align: center;
    font-size: 16px;
    color: white;
    width: 600px;
    margin: 15px auto;
    z-index: 9999999;
}

#registerscreen #submit{
    width: 300px;
    text-align: center;
    margin: 15px auto;
    z-index: 9999999;
}

#registerscreen #submit .inf_race{
    animation: highlited 500ms linear infinite;
    font-weight: normal;
    text-align: center;
    color: rgb(0,255,255);
    display: block;
    font-size: 20px;

    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#registerscreen #submit .submit_race{
    animation:highlited 500ms linear infinite;
    position: relative;
    text-align: center;
    border: 0px;
    background-color: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 0px 10px;
    font-size: 20px;

    font-weight: normal;
    line-height: 30px;
    text-transform: none;
    height: 30px;
    box-sizing: border-box;
}

#registerscreen #submit .submit_race::first-letter {
    color: rgb(4,193,193);
}

#registerscreen #submit .submit_race:hover{
color: black;
    background-color: rgb(232,250,17);
    animation:none;
}

.heroesblock {
   overflow:hidden;
}



.field.heroesf .heroes .owl-stage-outer {
   overflow:visible !important;
}

.heroes .hero_block {
    height: 238px;
    position: relative;
    width: 200px;
    margin: 10px;
}

.heroes .hero_block.empty {
    background: url(stations_plus.png) center no-repeat;
    cursor: pointer;



}

.heroes .hero_block.empty .inf {
    top: 111px;
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    color: white;
    opacity: .5;
    text-transform: uppercase;
        text-align: center;
            font-weight: normal;

    text-decoration: none;
    font-size: 32px;
    line-height: 25px;
}

.heroes .hero_block.empty:hover .inf {

    opacity: 1;

}





.heroes .hero_block .havatar {
    position: absolute;
    top: 40px;
    left: calc(50% - 75px);
    width: 150px;
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    background-blend-mode: overlay;
    background-color: rgb(70, 70, 75);
    filter: grayscale(100%) brightness(110%) contrast(135%);
    border: 0px solid white;
    box-sizing: border-box;
}

.heroes .hero_block .hperks {
    position: absolute;
    top: 0px;
    left: calc(50% - 21.5px);
}

.heroes .hero_block .hperks .perk{
    display: inline-block;
    width: 43px;
    height: 43px;
    margin: 0px auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    background-color: white;
    position: relative;
    box-sizing: border-box;
    border: 2px solid white;
}


.heroes .hero_block .hperks .perk:hover{
    animation: blink 100ms linear 2;
}



.heroes .hero_block .hperks .perk:after{
    content: '';
    position: absolute;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    border-bottom: none;
    width: 0px;
    bottom: -22px;
    left: calc(50% - 10px);
    height: 12px;
}

.heroes .hero_block .hname {              
    position: absolute;
    bottom: 0px;
    left: calc(50% - 100px);
    width: 200px;
    height: 45px;
    line-height: 10px;
    text-align: center;
    font-size: 25px;

    text-transform: uppercase;
    padding: 10px 0px;
    color: black;
    background-color: rgb(232,250,17);
    box-sizing: border-box;
    
}

.heroes .hero_block .hname:after {
    content: '';
    position: absolute;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(232,250,17);
    border-top: none;
    width: 0px;
    top: -22px;
    left: calc(50% - 10px);
    height: 12px;
}

.heroes .hero_block .hname span {
    display: block;
    font-size: 20px;
    line-height: 26px;
    height: 26px;
    font-weight: normal;
}


.heroes .owl-dots .owl-dot.active span {
    animation: none !important;
}



.switcher {
    display: inline-block;
    position: relative;
    text-align: center;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    height: 28px;
    min-width: 28px;
    opacity: 0.6;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 0px center;
    line-height: 28px;
    padding-left: 29px;
    font-size: 10px;
    text-transform: uppercase;
    background-image: url(../../img/ico/add-128.png);
    color: white;
    margin: 10px 5px;
}

.switcher:hover {
    opacity: 1;
}

.switcher.neworg {
    animation:highlited 500ms linear infinite;
    background-image: url(../../img/ico/add-128.png);
}

.switcher.myorg {
    background-image: url(../../img/ico/corp-128.png);
}


.subtitle {
    color: white;
    position: relative;
    padding: 15px 5px 0px;

    font-size: 20px;
    padding: 3px 5px 3px 0px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.subtitle button {
    position: absolute;
    top: 0px;
    right: 0px;
    animation:highlited 500ms linear infinite;
}


.levelup {
    display: block;
    position: relative;
    margin: 30px auto 0px;
    width: 500px;
    padding: 20px 20px 20px 20px;
    background: rgba(0,0,0,0.65);
    color: white;
    text-align: center;
    box-sizing: border-box;
}

.levelup:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
.levelup:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  



.levelup .lu_title {
    display: block;
    left: 0px;
    right: 0px;
    font-size: 30px;
    color: rgb(252,254,84);
    padding: 10px 0px;
    box-sizing: border-box;
    text-transform: uppercase;

    text-decoration: none;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;

}

.levelup .lu_title.next {
    
    font-size: 20px;

}


.levelup .lu_name {
    font-size: 20px;
    color: rgba(255,255,255,1);
    text-transform: uppercase;

}



.levelup .lu_ico {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 12px auto 0px;
    background-size: 80px;
    background-repeat: no-repeat;
    background-position: center;
}

.levelup .lu_rewards{
    margin: 18px 0px 15px;
    line-height: 21px;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    color: white;
    padding: 0px;
    z-index: 1000000;
}

.levelup .lu_rewards .lu_reward{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 70px;
    margin: 0px 5px;
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.levelup .lu_rewards.next .lu_reward{
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0px 5px;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}


.levelup .lu_rewards .lu_reward:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}

.levelup .confirm_level {

    padding: 20px 0px;
}

.levelup .confirm_level button {
    animation:highlited 500ms linear infinite;
}

#window_perk {
    font-size: 15px;
    display: block;
    position: fixed;
    top: 20px;
    height: 550px;
    right: calc(50% - 187px);
    max-width: 500px;
    width: 100%;
    background-color: black;
    box-sizing: border-box;
    z-index: 10000000;
    text-align: left;
}

#window_perk .close {
    z-index: 100;
}

#window_perk:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#window_perk:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#window_perk .image {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 200px;
    bottom: 10px;
    background-size: cover;
}


#window_perk .textf {
    position: absolute;
    top: 13px;
    left: 220px;
    right: 15px;
    color: white;
    text-align: left;
}

#window_perk .textf .name {
    color: white;
    text-transform: uppercase;
    text-shadow: 0px 0px 3px rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 41px;
    text-align: left;

    font-weight: normal;
}

#window_perk .textf .titl {
    color: white;
    text-align: left;
    font-size: 24px;
    color: rgb(238,233,119);
    text-transform: uppercase;

    padding: 15px 0px;
}

#window_perk .textf .desc {

    color: white;
    padding: 15px 0px;

}

#window_perk #pvals {
    position: absolute;
    top: 300px;
    left: 220px;
    right: 15px;
    color: white;
    text-align: left;
}

#window_perk #pvals .pval {
display: block;
    height: 50px;
    padding-left: 65px;
    margin: 10px 0px;
    line-height: 50px;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: rgb(238,233,119);
}

#window_perk #pvals .pval span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}




.profile_orgs{position:relative;width: 100%;color:white;box-sizing:border-box; border-spacing: 0px;border-collapse: separate; font-size: 14px;}
.profile_orgs tr td { cursor: pointer }

.profile_orgs tr:hover {  
    background-color: rgba(255,255,255,.1);
   

}




.profile_orgs th {
    padding-left: 5px;
    text-align: left;
    font-weight: normal;
    background-color: white;
    font-weight: bold;
    color: black;
}
.profile_orgs td.crew, .profile_orgs th.crew {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: 30px;
}



.profile_orgs th.crew img {
    filter: invert(100%);
}

.profile_orgs th.org_name {
    width: 220px;
}



.profile_orgs td { text-align: left; font-size: 13px; font-weight: normal; padding: 5px; }
.profile_orgs td.number { font-size: 12px; font-weight: normal; color: rgba(255,215,0,1); width: 20px; text-align: center; }
.profile_orgs td.image{ width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.profile_orgs td.name { padding: 0px 0px 0px 20px; text-transform: uppercase;}


.profile_orgs td.crew, .profile_orgs th.crew {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}



.profile_orgs th.crew img {
    filter: invert(100%);
}



.profile_orgs .la {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
}

.ogsblock {
    margin: 10px 0px 30px;
}

.ogsblock .buttons {
   text-align: left;
}


#invalidmail.blink,
#onlylogin.blink,
#resetconfirmation.blink{
    animation: blink 300ms linear 1;
}

.yellow {
    background-color: rgb(232,250,17);
}


#profilebox {
    display: block;
    position: relative;
    width: calc(100% - 40px);
    margin: 0px auto 100px;

} 

#profilebox .submenu {
    font-size: 16px;
    display: block;
    float: left;
    position: relative;
    width: 300px;
    padding: 20px 20px 20px 20px;
    background-color: rgba(0,0,0,0.65);
    box-sizing: border-box;
    animation: crt 10000ms linear infinite;
    text-align: center;
    margin: 0px;

} 
#profilebox .submenu:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
#profilebox .submenu:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  

#profilebox .profilecard {
    font-size: 16px;
    display: block;
    float: right;
    position: relative;
    width: calc(100% - 310px);
    padding: 20px 20px 20px 20px;
    background-color: rgba(0,0,0,0.65);
    box-sizing: border-box;
    animation: crt 10000ms linear infinite;
    text-align: center;
    margin: 0px;

} 

#profilebox .profilecard:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
#profilebox .profilecard:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  

#profilebox .profilecard .infoblock {

}

#profilebox .profilecard .infoblock .name {
    position: relative;
    margin:5px auto 0px;
    line-height: 40px;
    display: block;
    font-size: 55px;
    color: rgba(255,255,255,.9);
    text-shadow: rgb(163,188,255) 0px 0px 6px;
    box-sizing: border-box;
    text-transform: uppercase;

    text-decoration: none;
    font-weight: normal;
    text-align: center;
    padding: 30px 0px 5px;
    letter-spacing: -1px;
}

#profilebox .profilecard .infoblock .name:before {
    content: 'NAME';
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 17px;

    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#profilebox .profilecard .infoblock .email {
    position: relative;
    font-size: 20px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    padding: 20px 0px 5px;

}

#profilebox .profilecard .infoblock .email:before {
    content: 'EMAIL';
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 17px;
    color: rgba(255,255,255,0.9);

    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#profilebox .profilecard .infoblock .rank {
    position: relative;
    font-size: 20px;
    color: rgb(238,233,119);
    text-transform: uppercase;
    padding: 20px 0px 0px;

}

#profilebox .profilecard .infoblock .rank:before {
    content: 'RANK';
    position: absolute;
    top: 0px;
    left: 0px;

    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#profilebox .profilecard .infoblock .rankwindow {
    position: relative;
    width: 200px;
    margin: 0px auto;
}


#profilebox .profilecard .infoblock .simg {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px auto;

}

#profilebox .profilecard .infoblock .simg .sface {
    position: absolute;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#profilebox .profilecard .infoblock .srank {
    width: 150px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0px auto;
}


@media (max-width: 700px) { 
    #profilebox {
        display: block;
        position: relative;
        width: 90%;
        margin: 10px auto 70px;
    }

    #profilebox .submenu {
        float: none;
        width: auto;
    }
    
    #profilebox .profilecard {
        width: auto;
        float: none;
        margin: 10px auto;
    }
}

.loggedbox {
    padding: 0px;
    box-sizing: border-box;
    position: relative;
    width: 250px;
    min-height: 300px;
    background-color: black;
}




.loggedbox .name {
    font-size: 30px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(163,188,255) 0px 0px 6px;
    text-transform: uppercase;

    padding: 6px 0px;
}

.loggedbox .email {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;

        padding: 6px 0px;
}

.loggedbox .sface {
    font-size: 20px;
    color: rgb(238,233,119);
    text-transform: uppercase;
    padding: 180px 0px 0px;

    position: relative;
    background-size: 125px;
    background-position: center top;
    text-align: center;
    background-repeat: no-repeat;
}



.loggedbox .sface .savatar {
    position: absolute;
    top: 0px;
    left: 64px;
    width: 127px;
    height: 178px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.loggedbox .sface .srank {
    position: absolute;
    top: 0px;
    left: 64px;
    width: 127px;
    height: 178px;
    background-position: 64px 137px;
    background-repeat: no-repeat;
    background-size: 60px;
}

.loggedbox .sface .actions .sub_button {
    position: relative;
    text-align: center;
    border: 0px;
    background-color: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 0px 10px;
    font-size: 20px;

    font-weight: normal;
    line-height: 30px;
    text-transform: uppercase;
    height: 30px;
    box-sizing: border-box;
    text-decoration: none;
    
    display: inline-block;
    height: auto;
    text-align: center;
    width: auto;
    margin: 15px 5px;

    letter-spacing: 0px;
    text-shadow: none;
    opacity: 1;
    
}

.loggedbox  .sface .actions .sub_button.profile:hover::first-letter {
    color: rgb(4,193,193);
}

.loggedbox .sface .actions .sub_button.logout {
    color: white;
    background-color: rgb(168,0,0);
    
    
}

.loggedbox  .sface .actions .sub_button.logout::first-letter {
    color: rgb(4,193,193);
}

.loggedbox .sface .actions .sub_button:before {
    content: '';
    border: 0px;
}
.loggedbox .sface .actions .sub_button:hover {
    animation: blink 100ms linear 2 alternate;
    color: black;
    background-color: rgb(232,250,17);
    text-decoration: none;
}

.loggedbox  .sface .actions .sub_button::first-letter {
    color: rgb(4,193,193);
}

#profilebox .submenu .profile_menu_items {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

#profilebox .submenu .profile_menu_items li {
    display: block;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px;
    position: relative;
    color: rgba(255,255,255,0.5);
}

#profilebox .submenu .profile_menu_items li a {
    display: block;
    text-decoration: none;
    color: rgba(255,255,255,.9);
    font-size: 20px;
    letter-spacing: 4px;
    height: 30px;
    padding: 0px 5px 0px 20px;
    line-height: 30px;
    margin: 0px;
    text-align: left;

    opacity: 0.9;
    cursor: pointer;
    text-shadow: rgb(255,213,182) 0px 0px 4px;
}


#profilebox .submenu .profile_menu_items li a:hover {
   background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 2px;
    background-position: 0 0, 0px 0px;
    color: black;
    animation: blink 100ms linear 2;
}

#profilebox .submenu .profile_menu_items li a.selected {
   color: rgba(0,0,0,1);
   background-color:  rgba(255,255,255,1);
}


#profilebox .submenu .profile_menu_items li a.selected:hover {
  background:  rgba(255,255,255,1);
  animation: none;
  color: black;
}

.rewardsbox .wallpapers {

}

.rewardsbox .wallpapers .wp {
    display: block;
    position: relative;
    height: 135px;
    width: 240px;
    border: 1px solid white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0px 10px 0px 0px;
    color: white;
    line-height: 135px;

    font-size: 20px;
}

.rewardsbox .wallpapers .wp.disabled {
    filter: grayscale(100%);
}

.rewardsbox .wallpapers .wp.available .upslider {
    position: absolute;
    top: 101%;
    left: 0px;
    width: 100%;
    height: 100%;               
    transition: 0.1s linear;
    background-color: rgba(0,0,0,0.8);
}

.rewardsbox .wallpapers .wp.available .upslider select {
    margin: 50px auto;
    width: calc(100% - 50px);
}

.rewardsbox .wallpapers .wp.available:hover .upslider {
   top: 0px;
}

.rewardsbox .wallpapers .wp.available .upslider.opened {
   top: 0px;
}



.rewardsbox .wallpapers .wp.available .upslider .dowload_button {
    position: relative;
    border: 0px;
    background-color: white;
    cursor: pointer;
    color: black;
    padding: 0px 10px;
    font-size: 20px;

    font-weight: normal;
    line-height: 30px;
    text-transform: uppercase;
    box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    height: auto;
    text-align: center;
    width: auto;
    margin: 50px auto;
    letter-spacing: 0px;
    text-shadow: none;
    opacity: 1;
}

.rewardsbox .wallpapers .wp.available .upslider .dowload_button::first-letter {
    color: rgb(4,193,193);
}

.credit {


    
   font-size: 55px;
   
    text-shadow: rgb(163,188,255) 0px 0px 6px;
   
    color: rgb(238,233,119);
    text-transform: uppercase;
        text-decoration: none;
}


.cookiesblock {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(40,40,40,1);
    min-height: 30px;
    padding: 13px 0px;
    transition: all 3s;
    z-index: 999999999;
}

.cookiesblock.closed {
    position: fixed;
    bottom: -500px;
}

.cookiesblock p {
    color: gray;
    font-size: 13px;

    width: calc(100% - 140px);
    float: left;
    padding: 0px 30px 0px 30px;
    margin: 0px;
    text-align: right;
    box-sizing: border-box;
    line-height: 16px;
}

.cookiesblock button {
    float: left;
}




#avatarbox {     
    position: absolute;
    top: 88px;
    left: calc(50% - 187.5px);
    height: 565px;

    background-color: rgba(0,0,0,0.65);
    width: 375px;
 
}
#avatarbox:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  
#avatarbox:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;   }  



#avatarbox #hero_locker {
    position: relative;
    margin-top: 302px;
    line-height: 23px;
    background: linear-gradient(to right,rgba(103,223,237,0.0) 0%,rgba(103,223,237,0.4) 40%,rgba(103,223,237,0.4) 60%,rgba(103,223,237,0.0) 100%);
    height: 56px;
    font-weight: normal;
    text-align: center;
    font-size: 45px;
    color: white;
    padding: 0px;
    text-transform: none;
    text-shadow: 0px 0px 10px rgb(0,255,255);

    z-index: 1000000;
    padding: 12px 0px;
    text-transform: uppercase;
    animation: crt 10000ms linear infinite;
}


#avatarbox .race_title {
    position: relative;
    margin-top: 477px;
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    line-height: 16px;
    height: 40px;
    font-weight: normal;
    text-align: center;
    font-size: 40px;
    color: white;
    padding: 0px;
    text-transform: none;

    z-index: 1000000;
    padding: 12px 0px;
    text-transform: uppercase;
    white-space: nowrap;
    /* background-image: linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5)), linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5)); */
    /* background-size: 2px 2px; */
    /* background-position: 0 0, 0px 0px; */
    color: black;
    background: white;
    overflow: hidden;
}

#avatarbox.locked .race_title {
    animation: blink 100ms linear 2;
}


#avatarbox .race_title span{
    display: block;
    font-size: 20px;
    padding-top: 10px;
}

#avatarbox .races{
    position: absolute;
    top: 65px;
    text-align: center;
}

#avatarbox .avatar{
    height: 420px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

 

#avatarbox .races .race{
    position: relative;
    width: 320px;
    height: 320px;
    margin: 92px auto 0px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    background-blend-mode: overlay;
    background-color: rgb(80, 80, 85);
    animation: crt 10000ms linear infinite;
    filter: grayscale(100%) brightness(130%) contrast(110%);

    
}


#avatarbox .owl-next{
    position: absolute;
    top: 200px;
    right: 0px;
    height: 50px;
    width: 35px;
    background: url('../../img/ico/arrow-24-32.png') -5px center no-repeat;
    
}

#avatarbox .owl-prev{
    position: absolute;
    top: 200px;
    left: 0px;
    height: 50px;
    width: 35px;
    background:url('../../img/ico/arrow-88-32.png') 5px center no-repeat;
}

#avatarbox .owl-prev.disabled,
#avatarbox .owl-next.disabled
{
    opacity: .1;
}


#avatarbox #submit{
    width: 300px;
    text-align: center;
    margin: 25px auto;
    z-index: 9999999;
    position: absolute;
    bottom: 1px;
    left: 0px;
    right: 0px;
}

#avatarbox #submit .inf_race{
    animation: highlited 500ms linear infinite;
    font-weight: normal;
    text-align: center;
    color: rgb(0,255,255);
    display: block;
    font-size: 20px;

    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#avatarbox #submit .submit_race{
    animation:highlited 500ms linear infinite;
    position: relative;
    text-align: center;
    border: 0px;
    background-color: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 0px 10px;
    font-size: 20px;

    font-weight: normal;
    line-height: 30px;
    text-transform: none;
    height: 30px;
    box-sizing: border-box;
}

#avatarbox #submit .submit_race::first-letter {
    color: rgb(4,193,193);
}

#avatarbox #submit .submit_race:hover{
color: black;
    background-color: rgb(232,250,17);
    animation:none;
}

.userbox {
    position: relative;
    margin: 40px auto 70px;
    width: 90%;
    background-color: rgba(0,0,0,0.65);
    padding: 10px 10px;
    min-height: 400px;
    max-width: 900px;
}



.userbox:before { content:''; display: block;  position: absolute;  top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid rgba(255,255,255,.5); border-left: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5);   }  
.userbox:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid rgba(255,255,255,.5); border-left: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5);   }  

.userbox .user_head {
    position: relative;
    height: 280px;
    
}

@media (max-width: 520px) { 
      .userbox {
           margin: 0px auto 70px;

      }
      
      .userbox .user_head {
           height: auto;

      }
}

.userbox .user_relations .his_org,
.userbox .user_relations .membering_org,
.userbox .user_membering .owned_orgs,
.userbox .user_membering .memberof_orgs {
   padding: 20px 0px;
}
.userbox .rl_title {
    position: relative;

    padding: 20px 5px 3px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 17px;
    color: rgba(255,255,255,0.9);
    text-shadow: rgb(255,213,182) 0px 0px 4px;
    text-transform: uppercase;
    letter-spacing: 3px;
}


.userbox .simg {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 20px;
    top: 30px;
}

@media (max-width: 520px) { 
      .userbox .simg {
          position: relative;
          width: 100%;
          left: auto;
          top: auto;
      }
}

.userbox .simg .sface {
    position: absolute;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 520px) { 
      .userbox .simg .sface {
          position: relative;
          width: 100%;
          left: auto;
          top: auto;
          height: 220px;
      }
}

.userbox .user_name {
    position: absolute;
    left: 220px;
    top: 0px;
    line-height: 40px;
    font-size: 55px;
    color: rgba(255,255,255,.9);
    text-transform: uppercase;

    text-decoration: none;
    font-weight: normal;
    text-align: left;
    padding: 30px 0px 5px;
    letter-spacing: -1px;
}

@media (max-width: 520px) { 
      .userbox .user_name {
          position: relative;
          width: 100%;
          left: auto;
          top: auto;
          text-align: center;
          font-size: 40px;
      }
}

.userbox .user_name .user_email {
    font-size: 15px;
    color: rgba(255,255,255,.3);
    text-transform: uppercase;

    text-decoration: none;
    font-weight: normal;
    text-align: left;
    letter-spacing: 0px;
    line-height: 15px;
}

@media (max-width: 520px) { 
      .userbox .user_name .user_email {
     
          text-align: center;
          
      }
}

.userbox .user_rank {
        position: absolute;
    top: 23px;
    width: 150px;
    right: 0px;
    text-align: center;
    }
    
@media (max-width: 520px) { 
      .userbox .user_rank {
          position: relative;
          width: 100%;
          left: auto;
          top: auto;

      }
}
    
.userbox .user_rank .rank {
    position: relative;
    font-size: 20px;
    color: rgb(238,233,119);
    text-transform: uppercase;
    padding: 20px 0px 0px;

        text-align: center;
}


.userbox .user_rank .srank {
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0px auto;
}


@media (max-width: 520px) { 
      .userbox .user_membering {
          position: relative;
          width: 100%;
          left: auto;
          top: auto;

      }
}

#telo {
    height: 650px;
    position: relative;
}
    
#parallaxIntro{ z-index: 9990090; margin: 0px auto;position:relative;width: 100%; max-width: 1200px; height: 100%;  background-color: var(--hud_backgroundcolor);color: white; overflow: hidden; }
#parallaxIntro:before { content:''; display: block;  position: absolute; top: 0px; left: 0px; right: 0px; height: 10px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; z-index: 100;  }  
#parallaxIntro:after { content:''; display: block;  position: absolute; bottom: 0px; left: 0px; right: 0px; height: 10px; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white;  z-index: 100;  }  

#parallaxIntro .close { animation:none;    right: 28px;}


  /* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 100%; /* fallback for older browsers */
    
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;

    background: black url(./intro/space_bckgr.jpg) repeat;
  }

  .parallax__group {
    position: relative;
    height: 800px; /* fallback for older browsers */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }

  .parallax__layer--base {
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    transform: translateZ(-100px) scale(1.34);
    z-index: 3;
  }

  .parallax__layer--deep {
    transform: translateZ(-295px) scale(2);
    z-index: 2;
  }


  /* demo styles
  --------------------------------------------- */

 
   /* centre the content in the parallax layers */
  .parallax .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .parallax .helpbox {
    text-align: center;
    position: absolute;
    left: calc(50% - 150px);
    width: 300px;
    color: white;
    text-transform: uppercase;
    animation:highlited 500ms linear infinite;

  }

  .parallax .textbox {
    text-align: left;
    position: absolute;
    border: 1px solid black;
    color: black;
    background-color: white;
    padding: 10px 15px;
    max-width: 250px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    FONT-STYLE: italic;
  }
  
  .parallax .date {
    text-align: left;
    position: absolute;
    border: 1px solid black;
    color: black;
    background-color: white;
    padding: 5px 10px;
    max-width: 250px;
    font-size: 18px;
    font-weight: bold;
    FONT-STYLE: italic;
  }
  
  
  .parallax .p_frame {
    position: absolute;
    border: 1px solid black;
    background-color: gray;
  }
  
  .parallax .p_whiteline {
    position: absolute;
    background-color: white;
    height: 5px;
    left: 0px;
    right: 0px;
    
  }
  
  .beta {
  position: absolute;
  top: 8px;
  left: 50%;
  }
  .beta a {
  position: absolute;
  left: -70px;
  right: -70px;
  text-align: center;
  height: 30px;
  background-color: white;
  line-height: 30px;
  color: rgba(0,0,0,1);
  cursor: pointer;
  opacity: 0.9;

  letter-spacing: 0px;
  font-size: 20px;
  text-transform: uppercase;
  text-shadow: rgb(255,213,182) 0px 0px 4px;
  transition: text-shadow 1s ease;
  }
  
.beta a::first-letter {
    color: rgb(4,193,193);
}
  
.beta a:hover::first-letter {
    color: rgb(4,193,193);
}

.beta a:hover {
    animation: blink 100ms linear 2 alternate;
    color: black;
    background-color: rgb(232,250,17);
    text-decoration: none;
    text-shadow: -5px 0px 0 rgba(255,131,64,.3), 5px 0px 0 rgba(126, 250, 255, .2);
}


.beta .loginhint {


    display: block;
    position: absolute;
    top: 5px;
    left: 80px;
    

}

.header .menu ul li .login-beta {
  font-size: 10px;
  color: white;
  text-align: center;
  padding: 10px 0px;
  text-transform: uppercase;
}

.header .menu ul li .login-beta a.login-beta-a {
    display: inline;
    font-size: 10px;
    color: white;
    letter-spacing: 0px;
    text-decoration: underline;
    height: unset;
    padding: unset;
    line-height: unset;

}

.header .login-betah {
    font-size: 10px;
    color: white;
    text-align: center;
    position: absolute;
    left: -120px;
    right: -120px;
    height: 20px;
    text-transform: uppercase;
    top: 30px;
}

.header .login-betah a.login-beta-a {
    position: relative;
    display: inline;
    font-size: 10px;
    color: white;
    letter-spacing: 0px;
    text-decoration: underline;
    height: unset;
    padding: unset;
    line-height: unset;

    left: unset;
    right: unset;
    width: unset;
    background-color: unset;
    opacity: unset;
    text-shadow: unset;
}
.header .login-betah a.login-beta-a::first-letter {
    color: white;
}

#languageswicher {
    position: absolute;
    top: 20px;
    z-index: 101;
    right: 20px;
    left: unset;
    white-space: nowrap;
    text-align: right;
    width: 68px;

}

#wait_box{
    position: absolute;
    top: calc(36% - 50px);
    left: calc(50% - 220px);
    width: 440px;
    height: 144px;
    cursor: wait;
    z-index: 999999999;
    animation: windowshow 50ms linear 2 alternate;

}

#wait_box:before {
    content: '';
    position: absolute;
    left: -220px;
    right: -220px;
    top: -220px;
    bottom: -210px;
    background-size: contain;
    background-image: radial-gradient(rgba(0, 0, 0, 0.45) 0%,rgba(0, 0, 0, 0.45) 20%, rgba(0, 0, 0, 0) 70%);
    background-position: center;
    background-repeat: no-repeat;
}

#wait_box .inner{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
#wait_box .msg{
    position: absolute;
    top: 12px;
    left: 30px;
    right: 30px;
    color: silver;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}
#wait_box .msg2{
    position: absolute;
    top: 30px;
    left: 5px;
    right: 5px;
    color: white;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}

#wait_box .bar{
    position: absolute;
    top: 58px;
    left: 10px;
    height: 7px;
    right: 10px;
    line-height: 45px;
    color: silver;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-left: 2px solid rgb(180,180,180);
    border-right: 2px solid rgb(180,180,180);
    background-color: rgb(40,40,40);
    text-shadow: var(--shadow_textfull);
}
#wait_box .bar .perc{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgb(250,250,250);
}
#wait_box .info {
    position: absolute;
    display: none;
    top: 93px;
    left: 0px;
    right: 0px;
    color: black;
    font-size: 8px;
    text-transform: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    text-shadow: var(--shadow_textfull);
    line-height: unset;
}
#wait_box .info .ver{
    display: block;
    position: absolute;
    right: 15px;
    left: 15px;
    top: 0px;
    text-align: center;
    letter-spacing: 0px;
    color: silver;
    font-size: 8px;
}
#wait_box .info .copy{
    display: block;
    position: absolute;
    left: 35px;
    bottom: 11px;
    text-align: left;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-size: 8px;
    color: black;
}

#carddetail{ 
    position: absolute;
    top: 59%;
   
    bottom: 0px;
    z-index: 1;
   
    text-align: center;
    padding: 40px 0px 0px;
    width: 100%;
    
}    


@media (max-width: 520px) { 
      #carddetail {
          top: unset;
      }
}



#carddetail .energy { display: block; position: absolute; right: 200px;  top: 67px; height: 30px; box-sizing: border-box; text-align: left; padding: 0px 0px 0px 20px; color: rgb(166,240,255);  font-size: 18px; line-height: 30px; font-weight: bold; background: url(./ico/ico_energy.png) center left no-repeat !important; background-size: 16px; }    
#carddetail .morale { display: block; position: absolute; right: 20px; width: 160px; top: 67px; height: 30px; box-sizing: border-box; text-align: left; padding: 0px 0px 0px 20px; color: rgb(166,240,255);  font-size: 18px; line-height: 30px; font-weight: bold; background: url(./ico/ico_morale.png) center left no-repeat !important; background-size: 16px; }


#carddetail .attributes {     
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 5px 5px;
    }
    
#carddetail .attributes:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 16px;
    height: 16px;
    color: rgba(210,210,210,1);
    font-size: 10px;
    cursor: pointer;
    background:rgba(0,0,0,0) url(ico/info-3-24.png) center no-repeat;
    background-size: 16px;
    opacity: 0.5;
 
}
#carddetail .attributes:hover { 
    animation: blink 100ms linear 2;
}


#carddetail .attributes:hover .acontent {
    display: block;
}
    
#carddetail .acontent {     
    display: none;
    position: absolute;
    left: calc(50%);
    transform: translateX(-50%);
    bottom: 0px;
    width: 330px;
    
    text-align: left;
    color: rgba(210,210,210,1);
    font-size: 12px;
    line-height: 22px;
    background-color: rgba(0,0,0,0.95);
    padding: 10px 20px 16px 20px;
    -webkit-clip-path: var(--clip_menu_acontentd);
    clip-path: var(--clip_menu_acontentd);
    z-index: 1;
    box-sizing: border-box;
    animation: blink 100ms linear 2;
}

#carddetail .acontent .txt { 
   display: block;
    position: relative;
    padding: 0px 0px 10px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: #ffc107;
 }    
    
#carddetail .acontent .value { 
    display: block;
    position: relative;
    font-size: 14px;
    padding: 5px 0px 0px 100px;
}

#carddetail .acontent .value .ott { 
    content:''; 
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 85px;
    font-size: 12px;
    font-weight: normal;
    color: rgba(150,150,150,1);
    text-align: right;
    padding: 5px 0px 0px 0px;
    
}



#carddetail .content {     
    display: block; 
    position: relative;
    color: rgba(210,210,210,1);
    font-size: 17px;
    line-height: 24px;
    margin: 20px auto 20px;
    max-width: 420px;
    padding: 0px 20px;
    }
 #carddetail .content .description {     
    color: #ffc107;
    }  
    
 @media (max-width: 520px) { 
      #carddetail .content {
          font-size: 14px;
          line-height: 20px;
          margin: 7px auto 7px;
      }
}   
       
 
#carddetail .buy {     
    display: block;
    margin: 20px 20px 55px 20px;
    position: relative;
    } 
    
#carddetail .buy:before {
    content: '* Properties may vary due to game balancing. Some cards may be disabled in specific game type.';
    position: absolute;
    top: calc(100% + 10px);
    right: 0px;
    left: 0px;
    color: rgba(150,150,150,0.8);
    font-size: 11px;
    line-height: 15px;
}    
    
#carddetail .buy .buyat {     
    box-sizing: border-box;
    color: black;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
    z-index: 1;
    padding: 7px 15px 7px 35px;
    position: relative;
    text-decoration: none;
}  
    
 #carddetail .buy .buyat:after {

    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #484848;
    color: black;
background-image: url(ico/opensea_Logomark-Transparent-White.png);
    background-size: 18px;
    background-position: 9px center;
    background-repeat: no-repeat;
    clip-path: var(--clip_button);
    cursor: pointer;
    z-index: -1;
filter: invert(1);
}


 #carddetail .buy .buyat:hover {
    animation:blink 100ms linear 2 alternate;
}   
    
 #carddetail .info {     
    box-sizing: border-box;
    color: white;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    margin: 10px 15px;
    
    z-index: 1;
    
    position: relative;
   
    }     
 
#carddetail .redeem {     
    display: block;
    margin: 30px auto 0px;
    position: relative;
    width: 480px;
    } 

    
     
    
 #carddetail .redeem .redeemoption {     
    box-sizing: border-box;
    color: white;
    height: 48px;
    text-align: left;
    font-size: 17px;
    margin: 10px 15px;
    z-index: 1;
    position: relative;
    }  
    
#carddetail .redeem .redeemoption:after {
    display: block;
    position: absolute;
    content: "";
    top: -4px;
    left: -12px;
    right: -12px;
    bottom: -4px;
    background-color: #c0c0c026;
    z-index: -1;
}    
    
    
 #carddetail .redeem .redeemoption .servername {     
    position: absolute;
    left: 0px;
    top: 6px;
    font-size: 14px;
   
    }  
#carddetail .redeem .redeemoption .serversectorname {     
    position: absolute;
    left: 5px;
    top: 28px;
    line-height: 10px;
    font-size: 9px;
    text-transform: uppercase;
    display: none;
    }  
#carddetail .redeem .redeemoption .serverversion {     
    position: absolute;
    left: 170px;
    top: 6px;
    display: none;
   
    }   
#carddetail .redeem .redeemoption .hash {     
    position: absolute;
    left: 0px;
    top: 27px;
    -webkit-user-select: all;
    user-select: all;
    font-size: 14px;
    
    }    
    
 #carddetail .redeem .redeemoption .hashbef {     
    position: absolute;
    left: 0px;
    top: 48px;
    line-height: 10px;
    font-size: 9px;
    text-transform: uppercase;
    text-align: right;
    display: none;
    }        
 
#carddetail .redeem .redeemoption .redeemact {     
    box-sizing: border-box;
    color: black;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    cursor: default;
    font-family: var(--fontFaimly_button);
    z-index: 1;
    padding: 0px 12px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
   
    }  
    
#carddetail .redeem .redeemoption .redeemact.active {     
    cursor: pointer;
   
    }      
    
#carddetail .redeem .redeemoption .redeemact:after {

    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: silver;
    color: black;

    
    
    z-index: -1;

}

#carddetail .redeem .redeemoption .redeemact.active:after {


    background-color: #ffbc00;
   

}


 #carddetail .redeem .redeemoption .redeemact.active:hover {
    animation:blink 100ms linear 2 alternate;
} 
    

    
#carddetail .content ul { margin: 0px; padding: 0px 0px 0px 15px; }
#carddetail .content ul li { margin: 0px; padding: 0px 0px; }
#carddetail .subtitle { display: block; text-align: left; color: rgba(210,210,210,1);  font-size: 21px; }

#image-reel { 
    bottom: 40%;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 110px;
    width: auto !important;
    height: auto!important;
}

#image-reel #image { 
    
    height: 100% !important;
    width: auto !important;
    top: 0px;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    max-height: 440px;
    max-width: 440px;
}

#carddetail .flip { 
display: block;
    position: absolute;
    top: 0px;
    right: calc(50% - 20px);
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0) url(ico/flip.png) center no-repeat;
    background-size: 24px;
}
#carddetail .flip:hover { 
    animation: blink 100ms linear 2;
}

@media (max-width: 520px) { 
      #carddetail .flip {
          display: none;
      }
}  
    
#carddetail .exports .export .cancel { 
  display: block; 
  position: absolute; 
  right: 0px;
  line-height: 20px;
  color: black;
  background-color: white;
  padding: 0px 5px;
  cursor: pointer;
  font-size: 10px;
  box-sizing: border-box;
  height: 20px;
}

#carddetail .exports .export .cancel:hover { 
  animation: blink 100ms linear 2 alternate;
}

#carddetail .merge-options {
    display: block;
    position: absolute;
    left: 10px;
    width: 300px;
    bottom: 31px;
    height: 185px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
}

#carddetail .merge-options .no-available{
    display: block;
    position: absolute;
    left: 10px;
    top: 40px;
    right: 10px;
    color: rgba(150,150,150,0.5);
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 12px;
}


#carddetail .merge-options .merge-option_info{
    display: block;
    position: absolute;
    left: 10px;
    top: 163px;
    right: 10px;
    color: rgba(150,150,150,0.5);
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 12px;
}

#carddetail .merge-options .merge-qty {
    color: white;
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    
}


#carddetail .merge-options .merge-option .detail {
    color: white;
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -30px;
    height: 40px;
    line-height: 60px;
    cursor: pointer;
    text-decoration: underline;
    z-index: 1000;
}

#carddetail .merge-options .merge-option .detail:hover {
   animation: blink 100ms linear 2 alternate;
   
}

#carddetail .merge-options .merge-option:hover .detail {
    display: block;
    
}

#carddetail .merge-options:before { 
    content: 'CONVERT TO CARD';
    color: rgba(150,150,150,1);
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: -25px;
    
}
 
#carddetail .merge-option { 
    display: inline-block;
    width: 70px;
    height: 160px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    margin: 0px 8px 0px 8px;
    position: relative;
}

#carddetail .merge-option:hover .imgcard {
    width: 110px;
    left: calc(50% - 55px);
    top: -10px;
    z-index: 100;
}

#carddetail .merge-option.available canvas { 
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    padding: 0px 0px 0px;
    cursor: pointer;
    transition: .08s;
 }
 
#carddetail .merge-option.unavailable canvas { 
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    padding: 0px 0px 0px;
    filter: grayscale(1) brightness(0.5);
    cursor: no-drop;
 }
 
#carddetail .merge-option.unavailable .merge-qty { 
    color: rgba(150,150,150,1);
}



 
 
#carddetail .merge-mor {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: block;
    text-align: center;
    color: white;

    font-weight: normal;
    font-size: 11px;
    padding: 3px 5px;
    margin: 0px;
    border: 0px;
   
    
}

#carddetail .merge-option.unavailable .merge-mor { 
    display: none;
}

#carddetail canvas {
    position: absolute;
    background-color: unset;
}





#carddetail.cards{ 
    position: absolute;
    top: 100px;
    bottom: 20px;
   
    z-index: 1;
    text-align: center;
    padding: 0px 0px 0px;
    left: 10px;
    right: 10px;
    display: block;
    overflow: hidden;
    width: auto;
}  

@media (max-width: 520px) { 
      #carddetail.cards {
         top: 50px;
         left: 0px;
         right: 0px;
         bottom: 0px;
      }
}


#carddetail .grid {    
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    top: 0px;
    bottom: 0px;
    
    z-index: 1;
    text-align: center;
    padding: 20px 0px 100px;
    left: 0px;
    right: 0px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    min-height: 250px;
    max-height: 100%;
    width: auto;
}
    

#carddetail.cards .card{ 
    position: relative;
    height: 350px;
}  

@media (max-width: 520px) { 
      #carddetail.cards .card {
          height: 550px;
      }
}

#carddetail.cards .card .content{ 
    display: block;
    position: relative;
    color: rgba(210,210,210,1);
    font-size: 12px;
    line-height: 18px;
    margin: 0px;
    width: auto;
    text-align: center;
} 

#carddetail.cards .card .content .chain{ 
    display: block;
    
    
}  

#carddetail.cards .card .content .chain img{ 
   height: 16px;
    
    
}  

#carddetail.cards .card .content .attributes{ 
    display: block;
    position: absolute;
    top: 170px;
    left: calc(50% - 72px);
    
}  

#carddetail.cards .card .content .image{ 
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: auto;
    height: 200px;
    transition: 0.2s;
    cursor: pointer;
}  

@media (max-width: 520px) { 
      #carddetail.cards .card .content .image {
         height: 400px;
      }
}

#carddetail.cards .card .content .image img{ 
    height: 100%;
} 

#carddetail.cards .card .content .image:hover {
    height: 220px;
    top: -10px;
}

#carddetail.cards .card .content .image:hover .acontent {
    display: block;
}

@media (max-width: 520px) { 
      #carddetail.cards .card .content .image:hover .acontent {
         display: none;
      }
      #carddetail.cards .card .content .image:hover {
          height: 400px;
          top: 0px;
      }
}

#carddetail.cards .acontent {
    bottom: unset;
    top: 130px;
    display: none;
    position: absolute;
    left: calc(50%);
    transform: translateX(-50%);
    width: 100%;
    max-width: 330px;
    text-align: left;
    color: rgba(210,210,210,1);
    font-size: 12px;
    line-height: 22px;
    background-color: rgba(0,0,0,0.95);
    padding: 30px 20px 20px 23px;
    -webkit-clip-path: var(--clip_menu_acontent);
    clip-path: var(--clip_menu_acontent);
    z-index: 1;
    box-sizing: border-box;
    animation: blink 100ms linear 2;
}

#carddetail.cards .card .content .description { 
    display: block;
    position: absolute;
    top: 215px;
    left: 0px;
    right: 0px;

    
}  

@media (max-width: 520px) { 
      #carddetail.cards .card .content .description {
         top: 420px;
      }
}

#carddetail.cards .card .content .description .name{ 
    font-size: 17px;
    line-height: 25px;
    padding: 5px 10px;
    color: rgba(210,210,210,1);
    
}  

@media (max-width: 520px) { 
      #carddetail.cards .card .content .description .name {
          font-size: 22px;
          line-height: 29px;
      }
}   

#carddetail.cards .card .content .description .subtitle{ 
    display: block;
    position: relative;
    color: rgba(210,210,210,1);
    font-size: 11px;
    line-height: 16px;
    padding: 0px 10px 0px;
    width: auto;
    text-align: center;
}  

@media (max-width: 520px) { 
    #carddetail.cards .card .content .description .subtitle{ 

        font-size: 14px;
        line-height: 18px;

    }  
}   


#carddetail.cards .card .content .description .txt{ 
    display: block;
    position: relative;
    color: rgba(210,210,210,1);
    font-size: 13px;
    line-height: 18px;
    padding: 5px 10px 10px;
    width: auto;
    text-align: center;
}  

#carddetail .ctitle {
   
   
    width: 100%;
   
    color: white;
    
    box-sizing: border-box;
    
    line-height: 45px;
    text-transform: uppercase;
    text-shadow: 0px 0px 3px rgba(255,255,255,0.7);
    text-decoration: none;
    text-align: center;
    font-size: 35px;
    text-align: center;
    font-weight: normal;
    text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
}

.subkategorie {
    
    margin: 20px auto 5px auto;
    box-sizing: border-box;
    display: block;
    padding: 0px 20px 10px 20px;
    clear: both;
    z-index: 100;
    position: relative;
    text-align: right;
}



.subkategorie li {
    
    position: relative;
    font-size: 12px;
    
    display: inline-block;
    margin: 3px 1px;
    padding: 3px  8px;
    font-family: var(--fontFaimly_button);
    background-color: #13232f;
    white-space: nowrap;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
}

.subkategorie li:hover {
    animation: blink 100ms linear 2 alternate;
}

.subkategorie li a {
    color: var(--font_color_basic);
    text-decoration: none;
    animation: none;
}
.subkategorie li a:hover {
    animation: none;
    text-decoration: none;
}



.blist ul {
    
    margin: 0px;
    padding: 0px;
    
}


.blist li {
    
    position: relative;
    font-size: 12px;
    
    display: inline-block;
    margin: 3px 1px;
    padding: 3px  8px;
    font-family: var(--fontFaimly_button);
    background-color: #13232f;
    white-space: nowrap;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
}

.blist li:hover {
    animation: blink 100ms linear 2 alternate;
}

.blist li a {
    color: var(--font_color_basic);
    text-decoration: none;
    animation: none;
}
.blist li a:hover {
    animation: none;
    text-decoration: none;
}

.visitors {
    color: rgba(255,255,255,0.3);
    text-align: center;
    padding: 20px 20px 20px 20px;
    font-size: 11px;
}

.visitor {
    display: inline;
    padding: 0px 4px;
}

.last_update {
    margin: 0px auto;
    box-sizing: border-box;
    display: block;
    padding: 5px 20px 20px 20px;
    clear: both;
    position: relative;
    text-align: right;
    font-size: 13px;
    color: #8bacd380;
}

.breadcrumbs {
    
    margin: 20px auto 20px auto;
    box-sizing: border-box;
    display: block;
    padding: 0px 20px;
    clear: both;
    z-index: 100;
    position: relative;
}

.breadcrumbs a {
    padding-right: 26px;
    position: relative;
    font-size: 14px;
    text-decoration: underline;
    opacity: 0.5;
}

.breadcrumbs a:last-child {
    opacity: 1;
}

.breadcrumbs a:last-child:hover {
    animation: none;
}

.breadcrumbs a.chome {
    opacity: 0.5;
}

.breadcrumbs a.chome img {
    opacity: 0.7;
    max-width: 14px;
    max-height: 14px;
}

.breadcrumbs a.inactive {
    text-decoration: none;
    color: gray;
    animation: none;
}

.breadcrumbs a.inactive:hover {
    animation: none;
}



.breadcrumbs a:not(.breadcrumbs a:last-child):before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    background: transparent url(ico/arrow-25-32.png) center no-repeat;
    background-size: 10px;
    opacity: .3;
}
.pagelogo {
    text-align: center;
    margin: 60px auto 20px;
    max-width: 1100px;
    box-sizing: border-box;
}
.pagelogo img {
    width: 270px;
    animation: drop-shadow_glitch 600ms linear !important;
    
}

.pagelogo span {
    display: block;
    padding: 13px 0px;
    color: #ffffff9e;
    animation: font_color_glitch 1300ms linear !important;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 8px;
    margin: 0px;
}

.bhangarvals {
    position: relative;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    
}

.bhangarvals .hhinfo {
    display: block;
    position: absolute;
    top: 25px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 11px;
    text-align: center;
    color: white;
    white-space: nowrap;
}

.bhangarvals .basehangarclass {
    position: relative;
    color: white;
    text-align: center;
    height: 70px;
}


.bhangarvals .basehangarclass:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    clip-path: var(--clip_dockfleetship);
    filter: invert(1);
    
}

.bhangarvals .basehangarclass.class-1:before{
    background-image: url(ico/ico_class_1_gr.png);
}
.bhangarvals .basehangarclass.class-2:before{
    background-image: url(ico/ico_class_2_gr.png);
}
.bhangarvals .basehangarclass.class-3:before{
    background-image: url(ico/ico_class_3_gr.png);
}
.bhangarvals .basehangarclass.class-4:before{
    background-image: url(ico/ico_class_4_gr.png);
}
.bhangarvals .basehangarclass.class-5:before{
    background-image: url(ico/ico_class_5_gr.png);
}
.bhangarvals .basehangarclass.class-6:before{
    background-image: url(ico/ico_class_6_gr.png);
}
.bhangarvals .basehangarclass.class-7:before{
    background-image: url(ico/ico_class_7_gr.png);
}
.bhangarvals .basehangarclass.class-8:before{
    background-image: url(ico/ico_class_8_gr.png);
}
.bhangarvals .basehangarclass.class-9:before{
    background-image: url(ico/ico_class_9_gr.png);
}
.bhangarvals .basehangarclass.class-10:before{
    background-image: url(ico/ico_class_10_gr.png);
}
.bhangarvals .basehangarclass.class-11:before{
    background-image: url(ico/ico_class_11_gr.png);
}
.bhangarvals .basehangarclass.class-12:before{
    background-image: url(ico/ico_class_12_gr.png);
}
.bhangarvals .basehangarclass.class-13:before{
    background-image: url(ico/ico_class_13_gr.png);
}

.bhangarvals .basehangarclass .basehangarclasstitle {
    display: block;
    position: absolute;
    top: 19px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}



.bhangarvals .basehangarclass .basehangarclasscount {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 17px;
    left: 0px;
    right: 0px;
}

.bhangarvals .basehangarclass .basehangarclassbarbox{
    height: 7px;
    left: 8px;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    top: 36px;
    right: 8px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}
.bhangarvals .basehangarclass .basehangarclassbar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
    max-width: 100%;
}

.module_connector {
    
    
    
    position: relative;
    background-position: center;
    
    background-repeat: no-repeat;
    margin: 0px 2px;
    padding: 0px 7px;
    display: inline-block;
    height: 30px;
    width: 30px;
    background-size: 30px;
}

.module_connector.con_a {
    background-image: url(connectors/a.png);
}

.module_connector.con_hlo {
    background-image: url(connectors/hlo.png);
}

.module_connector .sub {
    display: none;

}

.module_connector:hover .sub {
    display: block;
    position: absolute;
    background-color: black;
    color: var(--hud_invalid_color);
    padding: 4px 6px;
    min-width: 80px; 
    font-size: 11px;
    z-index: 100;
    text-align: left;
    top: -1px;
    right: calc(50% + 17px);
    line-height: 13px;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}



.module_connector:hover .sub:before {
    content: "";
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid black;
    position: absolute;
    top: 6px;
    right: -12px;


}

code {    
    font-size: 16px;
    background-color: #13232f;
    padding: 1px 6px;
    border-radius: 4px;
  
}


.miniature {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.miniature .miniature-image {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    filter: var(--shadow_drpofull);

}

.miniature .subcontent {
    display: none;
    position: absolute;
    top: calc(100% + 11px);
    color: var(--subtext_color);
    min-height: 20px;
    background-color: var(--subtext_color-background);
    z-index: 20;
    filter: none;
    left: 50%;
    transform: translate(-50%, 0);
    animation: var(--animation-subtext-fadein);
    filter: var(--subtext_shadow);
    pointer-events: none;

}

.miniature.rright .subcontent {
    right: unset;
    left: calc(100% + 10px);
    width: unset;
    top: calc(50% - 6px);
    transform: unset;
}

.miniature.rright .subcontent .subcontent-name {
    text-align: left;
    white-space: nowrap;
}

.miniature.rleft .subcontent {
    left: unset;
    right: calc(100% + 10px);
    width: unset;
    top: calc(50% - 6px);
    transform: unset;
}

.miniature.rleft .subcontent .subcontent-name {
    text-align: right;
    white-space: nowrap;
}


.miniature.mnright .subcontent {
    right: unset;
    left: calc(50% - 10px);
    width: unset;
    transform: unset;
}

.miniature.mnleft .subcontent {
    right: 0px;
    left: unset;
    width: unset;
    transform: unset;
}

.miniature .subcontent .subcontent-name {
    display: block;
    position: relative;
    color: var(--subtext_color);
    text-shadow: none;
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    padding: 5px 10px;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

.miniature.mnright .subcontent .subcontent-name {
    text-align: left;
}
.miniature.mnleft .subcontent .subcontent-name {
    text-align: right;
}

.miniature.top .subcontent {
    top: unset;
    bottom: calc(100% + 9px);
}

.miniature .subcontent:before {
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-bottom: 6px solid var(--subtext_color-background);
    position: absolute;
    top: -12px;
    left: calc(50% - 6px);
    filter: none;

}

.miniature.mnright .subcontent:before {
    left: 0px;
    right: unset;
}
.miniature.mnleft .subcontent:before {
    left: unset;
    right: 0px;
}

.miniature.rright .subcontent:before {
    left: -11px;
    top: 0px;
    border-right: 6px solid var(--subtext_color-background);
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
}

.miniature.rleft .subcontent:before {
    right: -11px;
    left: unset;
    top: 0px;
    border-right: 6px solid transparent;
    border-left: 6px solid var(--subtext_color-background);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.miniature.top .subcontent:before {
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--subtext_color-background);
    border-bottom: 6px solid transparent;
    position: absolute;
    top: unset;
    bottom: -12px;
    left: calc(50% - 6px);
    filter: none;
}



.miniature:hover .subcontent {
    display: block;
    /*animation:blink 100ms linear 2 alternate;*/
     
    pointer-events: none;
}

.faq {
    
}

@media (max-width: 520px) { 
    .faq {
        width: 100%;
        margin: 10px 0px 30px;
    }
   
}

.faq .faq-question-title .number {
    padding: 6px;
    margin: 0px 4px 0px 0px;
    font-size: 13px;
    background-color: #3f5774;
    border-radius: 40px;
    width: 10px;
    display: inline-block;
    height: 10px;
    line-height: 11px;
    text-align: center;
    font-weight: bold;
}

.faq .faq-topic {
  
  margin: 10px 10% 30px;
    width: 80%;
    border: 1px solid #436080;
    padding: 11px 13px 11px 13px;
    border-radius: 5px;
    display: block;
    position: relative;
    background-color: #13232f;
}

.faq .faq-topic .faq-topic-title {
    cursor: pointer;
    position: relative;
   
    font-family: var(--fontFaimly_header);
    
    text-decoration: none;
    font-size: 26px;
    font-weight: normal;
    padding: 10px 0px 10px 40px;
    text-align: left;
    clear: both;
    margin: 0px;
}

.faq .faq-topic.active .faq-topic-title {
   
    
    
}



.faq .faq-topic .faq-topic-title::after {
  content: "▶";
  font-size: 15px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.faq .faq-topic.active .faq-topic-title::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq .faq-topic .faq-topic-content {
  display: none; /* start hidden */
  padding: 0px 0px 20px 60px;
}


.faq .faq-topic.active .faq-topic-content {
  
}

.faq .faq-question {
  
  margin: 10px 0;
}

.faq .faq-question .faq-question-title {
    cursor: pointer;
    position: relative;
   
    font-family: var(--fontFaimly_header);
   
    text-decoration: none;
    font-size: 22px;
    font-weight: normal;
    padding: 10px 0px 10px 40px;
    text-align: left;
    clear: both;
    margin: 0px;
}

.faq .faq-question.active .faq-question-title {
    border-bottom: 1px solid rgba(139, 172, 211, 0);
}

.faq .faq-question .faq-question-title::after {
  content: "▶";
  font-size: 15px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.faq .faq-question.active .faq-question-title::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq .faq-question .faq-question-answer {
  display: none; /* start hidden */
  padding: 0px 0px 20px 60px;
}


.faq .faq-question.active .faq-question-answer {
  border-bottom: 1px solid rgba(139, 172, 211, 0.1);
}