@font-face { font-family: 'lato_regular';
             src: url('fonts/Lato-Regular.ttf') format('truetype'); }

@font-face { font-family: 'lato_light';
             src: url('fonts/Lato-Light.ttf') format('truetype'); }

@font-face { font-family: 'lato_black';
             src: url('fonts/Lato-Black.ttf') format('truetype'); }

html { height: 100%; background-color: #EBEBEB; font-family: lato_regular, sans-serif; }
* { padding: 0; margin: 0; max-width: 1100px; margin-left: auto; margin-right: auto; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
    color: #fff;
}
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.hand:hover { cursor: pointer; }

#logout_icon { display: none; float: left; height: 30px; opacity: 0.7; margin-left: 10px; }
input, label, #settings_content, button, a { font-family: lato_light, sans-serif; }

body { background: #fff; font: 17px/1.5 lato_regular sans-serif; margin: 0px; padding: 0px; font-family: lato_regular, sans-serif; }
h1, h2 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 36px; }
h2 { font-size: 21px; margin-bottom: 1em; }
#header { position: fixed; height: 50px; width: 100%; margin-top: 25px; font-family: lato_black, sans-serif; }
#logo { postition: relative; height: 20px;  float: right; display: inline-block;  margin: 5px 5px 0px 0px }
hr{ background-color: #008ACB; border: #008ACB; width: 100%; }
.navbar { position: fixed; height: 35px; top: 75px; width: 100%; background-color: #84C5E8; }
.back { border: none; height: 35px; width: 35px; margin-left: 2px; display: none; float: left; }
.wrapper { position: fixed;  height: calc(100% - 160px); width: 100%; margin-top: 110px; overflow: auto; -webkit-overflow-scrolling:touch; font-family: lato_regular, sans-serif; }
.wrapper_without_footer { height: calc(100% - 110px); font-family: lato_regular, sans-serif; }
.menu_alert { color: #EA6F6F; width: 100%; text-align: center; }
.desc { color: #4E5254; }

#page_title, #home_page_title { display: inline-block; width: calc(100% - 80px); margin-top: 7px; color: #077EBA; text-align: center; font-size: 0.9em; margin-left: 40px; font-family: lato_regular, sans-serif; }
#home_page_title { float: left; }
.scanner { height: 80px; width: 140px; background-color: #158ECC; border: none; background-image: url("../images/barcode.png"); background-position: 50% 50%; background-size: cover; margin-left: calc(50% - 70px); }

.back_button { height: 40px; width: 40px;  background-image: url('/image/back.png') no-repeat; border: none; margin-left: 10px; margin-top: 40px; }
.pp_content { padding: 0px 20px 10px 20px; color: #4E5254; height: calc(100% - 110px); overflow: auto; -webkit-overflow-scrolling:touch; font-size: 0.8em; font-family: lato_light, sans-serif; }
.privacy_policy h2 { color: #008ACB; width: 100%; background-color: #71B9E0; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-top: -50px; }

/* HOME */
.container { max-height:100%; width: 100%; margin-top: 0px; overflow: auto; -webkit-overflow-scrolling:touch; display: none; position: relative; }
.device_default_container, .devices_container, .home { display: none; }
.device_default_container, .devices_container { height: 100%; }
.prod_ul { margin-top: 20px; float: left; width: 40%; }
.dev_updt { width: 100%; height: auto; background-color: #FFDE00; font-family: lato_regular, sans-serif; font-size: 12px; color: #000; }
.updateDivRow { height: 25px; padding-top: 5px; border-bottom: 1px solid #158ECC; }
.updateDivRow label {margin-left: 3px;}

.prod_ul li, .device_page_content ul li { position:relative; list-style: none; width: 100%; background-image: url("../images/einklinker.png"); background-position: 50% 40%; background-size: cover; margin-top: 15px; height: 47px; }
.prod_title { margin-left: 6px; top: 1px; position: relative; font-size: 0.7em; font-weight: bold; }
.produkt_subtitle { float:left; position:relative; margin-left: 6px; font-size: 0.6em; top: 0px;}
.image_container { width: 45%; position: absolute; right: 0px; margin-top: 10px; display: none; }
.dev_image { position: absolute; height: auto; width: 90%; }
.info_button { width: 25px; height: 25px; float: left; margin-top: -15px; left: 180px; position: absolute; background-color: transparent; color: #fff; border: none; display: none; font-size: 0.8em; }


.device_page_content{ height: auto; overflow: auto; -webkit-overflow-scrolling:touch; width: 100%; margin-top: 20px; position: relative; }
.device_page_content ul{ float: left; width: 40%; position: relative; }
.device_page_content ul li { display: none; z-index: 1; }
.setting_title { color: #fff; font-size: 0.6em; font-weight: bold; margin-left: 10px;}
#settings_content { z-index: 0; width: calc(50% - 20px);  min-height: 233px; max-height: calc(100% - 25px); overflow: auto; -webkit-overflow-scrolling:touch; position: absolute; right: 0px; display: none; float: right; top: 30px; }
#settings_content_fake { z-index: -1; width: 50%; min-height: 233px; max-height: calc(100% - 25px); position: absolute; right: 0px; background-color: #84C5E8; display: none; float: right; top: 30px; overflow: auto; -webkit-overflow-scrolling:touch; }

#setting_0 { margin-top: 10px; }
.settings_content_button { height: 35px; width: calc(100% - 20px); margin-left: 5px; margin-top: 10px; color: #fff; border: 1px solid #008ACB; font-family: lato_regular, sans-serif; }
.settings_content_label { width: calc(100% - 50px); margin-left: 25px; text-align: center; margin-top: 10px; font-size: 0.8em; }
.green { background-color: #96D182 ; }
.red { background-color: #EB9696; }
.blue { background-color: #008ACB; }
.stoerungen_table { width: 100%; border-collapse:collapse; }
.stoerungen_table tr td { border-bottom: 1px solid #008ACB; padding-top: 5px; padding-bottom: 5px; }
.msg { margin-left: 5px; }

.warning { height: 28px; width: 28px; float: left; margin-top: 2px; }
.warning_popup { height: 60px; width: 60px; }

.messages_content { width: 100%; height: auto; max-height: calc(100% - 155px); margin-top: 155px; overflow: auto; -webkit-overflow-scrolling:touch; }



.messages_table { width: 100%; margin-top: 0px; border-collapse:collapse; }
.messages_table tr td { border-bottom: 1px solid #008ACB; background-color: #f1f1f1; }
.messages_table tr:nth-child(1) td { border-top: 1px solid #008ACB; }
.messages_table tr td:nth-child(1){ width: 60px; }
.messages_table tr td:nth-child(2){ width: calc(100% - 125px); font-size: 0.8em; color: #008ACB; }
.messages_table tr td:nth-child(3){ width: 65px; }
.message_confirm_button { height: 30px; width: 60px; color: #fff; background-color: #008ACB; border: none; margin-right: 5px; }

.setting_labels { font-weight: bold; font-size: 0.8em; margin-top: 15px; margin-bottom: 10px; width: 100%; text-align: center; }
.setting_value_labels { font-size: 0.7em; font-weight: bold; width: 50%; text-align: center; display: inline-block; }
.setting_button{ border: none; width: 100px; height: 32px; margin-left: calc(100% / 2 - 50px); margin-top: 10px; }


.plus_minus_button { height: 50px; width: 30px; border: none; }
.setting_plus { background: url('/images/plus.png') no-repeat; background-size: 100%; }
.setting_minus_left { background: url('/images/minus_left.png') no-repeat; background-size: 100%; float: left; }
.setting_plus_right { background: url('/images/plus_right.png') no-repeat; background-size: 100%; }
.setting_minus { background: url('/images/minus.png') no-repeat; background-size: 100%; }
.settings_div { height: 35px; width: 70%; margin-left: 15%; height: 35px; margin-left: calc(100% / 2 - 40px); margin-top: 10px; }
.setting_default_button { background-color:#008ACB; font-size: 0.7em; width: 100px; border: none; color:#fff; font-weight: bold; height: 35px; margin-left: calc(100% / 2 - 50px); font-family: lato_regular, sans-serif; margin-top: 20px; }


.dialog_content {height: 85%; overflow: auto; -webkit-overflow-scrolling:touch; padding:20px 10px 20px 10px;}
#dialogMessage { color: #008ACB; }
.logout_button { padding-top: 9px; padding-bottom:8px; margin-top:5px; width:48%; color:#fff; text-align: center; text-decoration: none; font-size: 0.7em; background-color: #008ACB; float: right; margin-right: 5px; font-weight: bold; }
.add_project_button { width: 48%; margin-left: 5px; }

.project_form { width: 100%; }
select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   height: 35px;
   border: 1px solid #BDBDBD;
}

.mac_div { width: 400px; }
.mac_div input { width: 96%; margin-left: 2%; height: 35px; border-radius: 4px; border: 1px solid #BDBDBD; font-size: 0.9em; text-align: center; margin-top: 5px; }
.mac_div input.mac_input { margin-top: 15px; }
button.transfer_button { margin-top: 14px; }
.new_ewac_mac_container {width: 100%; height:auto; border-bottom: 1px solid #158ECC;}

textarea { width: 96%; margin-left: 2%; margin-top: 5px; border-radius: 4px; border: 1px solid #BDBDBD; font-size: 0.9em; color: #BDBDBD; }
.button { height: 35px; border: none; color:#fff; font-size: 0.7em; background-color: #008ACB; margin-top: 5px; font-weight: bold; }
.add_button, .transfer_button, .transfer_container { width: calc(100% - 10px); margin-bottom: 10px; margin-left: 5px; }
.grey { background-color: #8F8F8F; }
.mac_button { width: calc(100% - 10px); margin-left: 5px; font-size: 0.8em; }

.update { padding-top: 5px; height: 25px; background-color: #FFDE00; font-family: lato_regular, sans-serif; font-size: 12px; color: #000; margin-top: 20px; }
.update_failed { padding-top: 5px; height: 25px; background-color: #FC7777; font-family: lato_regular, sans-serif; font-size: 12px; color: #000; margin-top: 20px; }
.update_img { height: 22px; margin-left: 5px; float: left; }
.update_label { margin-left: 5px; float: left; }
.update_button { float: right; border: none; height: 24px; background-color: #158ECC; width: 75px; color: #fff; margin-right: 3px; font-size: 12px; margin-top: -2px;}


.no_ewacs_label { width: 100%; text-align: center; background-color: #f1f1f1; padding: 10px 0px 10px 0px; color: #158ECC; font-family: lato_light, sans-serif; }
.add_ewac { height: 80px; width: 80px; background-color: #f1f1f1; margin-left: calc(50% - 40px); margin-top: 20px; border-radius: 40px; background-image: url("../images/add_ewac.png"); background-size:cover; border-color: #158ECC; border-width: 1px; border-style: solid; }


.ewac_content { width: 100%; height: 80px; background-color: #f1f1f1; }
.ewac_logo { height: 28px; margin-top: 25px; width: auto; margin-left: 5px; float: left; }
.ewac_icon { width: 40px; margin-top: 20px; float: right; margin-right: 5px; }
.ewac_label { color:#008ACB; margin-left: 5px; float: left; font-size: 0.8em; width: calc(100% - 260px); font-family: lato_regular, sans-serif; }
.ewac_address_label { font-size: 0.9em; }
.vertical_line { height: 100%; width: 1px; background-color: #008ACB; float: right; margin-right: 5px; }

/* DROP-DOWN */
.dropdown { height: 38px; width: calc(100% - 20px); background-color: #008ACB; margin-top: 10px; margin-left: 10px; }
.dropdown p { font-size: 0.7em; font-weight: bold; padding-top: 10px; margin-left: 10px; float: left; }
.dropdown_arrow { height: 100%; width: auto; float: right; margin-right: 10px; }
.dropdown_content, .dropdown_mac { width: calc(100% - 40px); height: auto; background-color: #f1f1f1; margin-left: 10px; padding: 10px; color: #008ACB; font-size: 0.8em; }
.dropdown_mac { margin-top: 10px; }
.config_content { margin-top: 20px; width: 100%; }
.button_bar { background-color: #f1f1f1; height: 45px; width: 100%; }
.link { color: #00A649; }
.dropdown_erreignisliste { max-height: 250px; overflow: auto; -webkit-overflow-scrolling:touch; }


/* ALERTS */
.delete_alert { width: 100%; height: 0px; background-color: #f1f1f1; }
.delete_yes, .delete_no { height: 100%; width: 51px; float: right; -webkit-appearance: none; border-radius: 0px; color: #fff; border: none; font-weight: bold; font-size: 0.7em; }
.delete_yes { background-color: #FC7777; }
.delete_no { background-color: #8EDE9E; }
.ewac_alert_text { color:#757575; font-size: 0.8em; margin-left: 5px; float: left; margin-top: 3px; font-family: lato_regular, sans-serif; }
.menu_aler, .regeneration_start_message, .regeneration_stop_message { color: #EA6F6F; width: 100%; text-align: center; margin-top: 5px;}
.regeneration_start_message, .regeneration_stop_message { font-size: 0.8em; padding-top: 5px; padding-bottom: 5px; }


.red_text { color: #EA6F6F; }
.info_text { text-align: center; font-size: 1em; margin-top: 5px; width: calc(100% - 10px); font-family: lato_regular, sans-serif; }

.value_label{ width: calc(100% - 60px); text-align: center; font-size: 1.1em; display: inline-block; float: left; margin-top: 10px; }

.info_text_bold { text-align: center; font-size: 1em; margin-top: 5px; width: calc(100% - 10px); color: #fff; }
.horizontal_line { height: 1px; background-color: #008ACB; width: calc(100% - 10px); float: left; margin-left: 3; margin-top: 7px; margin-bottom: 5px; }


/* IMPRESSUM */
.impressum_content, .help_content { padding: 20px; width: calc(100% - 40px); height: auto; background-color: #fff; color: #4E5254; font-size: 0.8em; font-family: lato_light, sans-serif; }
.help_ul { margin-left: 30px; } 


/* FOOTER */
footer{ height: 50px; width:100%; background: linear-gradient(to bottom, rgba(40,132,194,1) 0%,rgba(23,86,138,1) 100%); position: fixed; bottom: 0; }
footer ul { height: 44px; margin-top: 3px; }
footer ul li { position: relative; float: left; width: calc(100% / 4 - 1px); height: 100%; margin-top: 0px; list-style: none; }
footer ul li img { height: 25px; margin-top: 5px; margin-left: calc(100% / 2 - 12px); }
.menu_title{ font-size: 0.5em; margin-top: -7px; width:100%; text-align: center;}
.li_left { border-right: 1px solid #fff; }

.register { color: #008ACB; margin-top: -23px; }
.register_label { top: 10px; display: block; width: 100%; height: 30px; text-align: center; padding-top: 3px; }
.form { color: #008ACB; margin-top: 9%; width: 350px; }
.form_register { margin-top: 0px; }
.form a { font-size: 0.8em; color: #008ACB; }
.pass_forget { float: right; }
.form table, .reg_data { width: 100%; margin-top: 10px; }
.form_input_header { padding-bottom: 5px; display: none; }
.form table tr td { font-size: 0.9em; padding-top: 4px; padding-bottom: 4px; }
.form table tr td select, .reg_data tr td select { width: 100%; }
.reg_data tr td select { width: 96%; margin-left: 2%; }
.form table tr td input, .reset_form input { height: 35px; width: 100%; border-radius: 4px; border: 1px solid #BDBDBD; font-size: 0.9em; text-align: center; }
.login_submit { margin-top: 10px; background-color: #008ACB; border: none; color: #fff; height: 30px; width: 100%; position: relative; font-size: 0.8em; -webkit-appearance: none; border-radius: 0px; }
.login_submit:hover {
    background-color: #71B9E0;
}

fieldset.title { border-top: 1px solid #aaa; border-bottom: none; border-left: none; border-right: none; display: block; text-align: center; margin-top: 15px; margin-bottom: 10px; }
fieldset.start { margin-top: -10px; }
fieldset.title legend { padding: 5px 10px; }
.knm { width: 34%; float: left; margin-right: 20px; }
.knm_info { text-align: left; margin-top: 0px; }

.error_message, .regdata_error_message, .transfer_error_message { font-size: 0.7em; color: #EA6F6F; width: 100%; text-align: center; margin-top: 15px; font-family: lato_regular, sans-serif; font-size: 13px; }



.activity_indicator, .pdf_view, .activity_indicator_home, .messages_content_home, .alert_content { height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); display: none; position: absolute; top: 0px; }
.alert_content { background-color: #fff; opacity: 0.95; }
.alert_header, .alert_body, .alert_close {  width: 400px; text-align: center; color: #158ECC; margin-left: calc(50% - 200px); }
.alert_header { margin-top: 30%; border-bottom: 1px solid #158ECC; }
.alert_body { margin-top: 20px; }
.alert_close { margin-top: 20px; height: 25px; border: none; color: #fff; background-color: #00A649; }
.activity_indicator_home { background: rgba(0, 0, 0, 0.7); }
.loader_header { width: 100%; text-align: center; margin-top: 75px; color: #fff; height: 35px; font-family: lato_regular, sans-serif; }

.conel_label { margin-left: calc(50% - 175px); padding-top: 15px; position: relative; margin-top: 50px; width: 350px; font-family: lato_light, sans-serif; color: #4E5254; text-align: center; font-size: 0.8em; border-top: 1px solid #158ECC; }
.conel { color: #158ECC; font-size: 1.2em; font-family: lato_black, sans-serif;  }

.activity_indicator { background-color: #000; opacity: 0.8; }
.activity_indicator_home, .messages_content_home, .alert_content {z-index: 1000;}
.pdf_view { background-color: #F7FAFA; }
.pdf_embed { width: calc(100% - 5px); height: calc(100% - 50px); }

.pdf_close { border: none; color: #fff; width: 60px; height: 30px; background-color: #BF1300; border: 1px solid #fff; border-radius: 8px; position: absolute; bottom: 10px; margin-left: calc((100% - 60px)/2); }


@media only screen and (max-width: 600px) {
    .prod_title { font-size: 0.6em; }
    .produkt_subtitle { font-size: 0.5em; }
}


/* iPhone 6 & 6s*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
    .form { margin-top: 18%; }
    .form_register { margin-top: 0px; }
    .prod_ul { margin-top: 10px; width: 47%; }
    .dev_image { right: 0%; }
    .image_container { margin-top: 10px; }
    .device_page_content { margin-top: 15px; }
    #settings_content, #settings_content_fake { top: 25px; }
    .prod_title { font-size: 0.6em; }
    .produkt_subtitle { font-size: 0.6em; }
    .menu_title{ font-size: 0.6em; }
    .dropdown { width: calc(100% - 20px); }
    .dropdown_content { width: calc(100% - 40px); }
    .ewac_icon { margin-right: 0px; width: 35px; }
    .update_button { width: 69px; }
    .vertical_line { margin-right: 0px; }
    .mac_div { width: 100%; }
    .ewac_label { width: calc(100% - 200px); }
    .delete_yes, .delete_no { width: 36px; }
    .ewac_alert_text { font-size: 0.7em; margin-top: 10px; }
    .info_text { font-size: 0.90em; }
    .knm { width: 42%; margin-right: 10px; }
    .info_button { left: 125px; }
    .alert_header, .alert_body, .alert_close {  width: 90%; margin-left: 5%; }
}

/* iPhone 5 $ 5S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 374px)
and (orientation : portrait) {
    .form_register { margin-top: 0px; }
    .prod_title { font-size: 0.6em; }
    .setting_title { font-size: 0.5em; }
    .dev_image { right: 0%; }
    .image_container { margin-top: 0px; }
    .prod_ul { margin-top: 10px; width: 47%; }
    .form, .conel_label { width: calc(100% - 20px); margin-left: 10px; }
    .mac_div { width: 100%; }
    .ewac_icon { margin-right: 0px; width: 35px; }
    .update_button { width: 69px; }
    .vertical_line { margin-right: 0px; }
    .info_text { font-size: 0.8em; }
    .info_button { left: 125px; }
    .alert_header, .alert_body, .alert_close {  width: 90%; margin-left: 5%; }
    .ewac_address_label { font-size: 0.7em; }
    .device_page_content { margin-top: 5px; }
    #settings_content, #settings_content_fake { top: 15px; max-height: calc(100% - 10px); }
    .plus_minus_button { height: 40px; width: 25px; border: none; }
    .value_label{ width: calc(100% - 50px); margin-top: 8px; }

}

/* iPhone 4 & 4S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 370px)
and (orientation : portrait) {
    .form_register { margin-top: 0px; }
    .prod_title { font-size: 0.6em; }
    .setting_title { font-size: 0.5em; }
    .form { margin-top: 0px; }
    .form, .conel_label { width: calc(100% - 20px); margin-left: 10px; padding-top: 5px; }
    .prod_ul { margin-top: 0px; }
    .ewac_label { width: calc(100% - 175px); }
    .ewac_address_label { font-size: 0.7em; }
    .ewac_logo { height: 26px; margin-top: 24px; width: auto; margin-left: 5px; float: left; }
    .back { bottom: 10px; }
    .mac_div { width: 100%; }
    .ewac_icon { margin-right: 0px; width: 35px; }
    .update_button { width: 69px; }
    .vertical_line { margin-right: 0px; }
    .ewac_alert_text { font-size: 0.6em; margin-top: 8px; }
    .delete_yes, .delete_no { width: 36px; }
    .info_text { font-size: 0.7em; }
    .info_button { left: 125px; }
    .knm { width: 42%; margin-right: 5px; }
    .knm_info { font-size: 0.9em; margin-top: -10px; }
    .alert_header, .alert_body, .alert_close {  width: 90%; margin-left: 5%; }
    .value_label { font-size: 0.8em; margin-top: 13px;}
    .dev_updt { font-size: 11px; }
    .device_page_content { margin-top: 5px; }
    #settings_content, #settings_content_fake { top: 15px; }
    .plus_minus_button { height: 40px; width: 25px; border: none; }
    .value_label{ width: calc(100% - 50px); margin-top: 8px; }
}


/* iPad - Portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .dev_image { max-width: 55%; right: 28%; }
    .prod_ul li, .device_page_content ul li { background-position: 0% 50%; }
    
}

/* iPad - Landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .dev_image { max-width: 30%; right: 14%; }
    .prod_ul li, .device_page_content ul li { background-position: 0% 50%; }
}


/* Desktop */
@media (min-width: 950px) {
   
    .dev_image { max-width: 43%; right: 41%; }
    .prod_ul { margin-top: 10px; }
    .prod_ul li, .device_page_content ul li { background-position: 0% 50%; }
    .menu_title{ font-size: 0.7em; margin-top: -7px; width:100%; text-align: center;}
    .dialog_content {padding: 20px 40px 20px 40px;}
    .logout_button { margin-right: 0px; width: 150px;}
    .add_project_button { margin-left: 0px; width: 150px; }
    .config_content { width: 600px; margin-left: auto; margin-right: auto; }
    .ewac_label { margin-left: 30px; font-size: 0.9em; }
    .footer_impressum { width: calc(25%); }
    /*#remember_me, #remember_me_label { display: none; }*/
    .messages_content { width: calc(100% - 300px); height: auto; max-height: calc(100% - 175px); margin-top: 155px; margin-left: 150px; }
}

@media (min-width: 1099px) {
    /*.back { display: none !important; } */
}


/*
HIMMELBLAU      :   #008ACB
GELBGRÜN        :   #00A649
VERKEHRSWEISS   :   #F7FAFA
EISENGRAU       :   #4E5254


JUDO COLOURS:
DARK BLUE :         #158ECC
LIGHT BLUE :        #71B9E0
WARM RED :          #BF1300
*/


.cssload-thecube {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    margin-top: 60px;
    position: relative;
    transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
    position: relative;
    transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,138,203);
    animation: cssload-fold-thecube 2.76s infinite linear both;
        -o-animation: cssload-fold-thecube 2.76s infinite linear both;
        -ms-animation: cssload-fold-thecube 2.76s infinite linear both;
        -webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
        -moz-animation: cssload-fold-thecube 2.76s infinite linear both;
    transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
    transform: scale(1.1) rotateZ(90deg);
        -o-transform: scale(1.1) rotateZ(90deg);
        -ms-transform: scale(1.1) rotateZ(90deg);
        -webkit-transform: scale(1.1) rotateZ(90deg);
        -moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
    transform: scale(1.1) rotateZ(180deg);
        -o-transform: scale(1.1) rotateZ(180deg);
        -ms-transform: scale(1.1) rotateZ(180deg);
        -webkit-transform: scale(1.1) rotateZ(180deg);
        -moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
    transform: scale(1.1) rotateZ(270deg);
        -o-transform: scale(1.1) rotateZ(270deg);
        -ms-transform: scale(1.1) rotateZ(270deg);
        -webkit-transform: scale(1.1) rotateZ(270deg);
        -moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
    animation-delay: 0.35s;
        -o-animation-delay: 0.35s;
        -ms-animation-delay: 0.35s;
        -webkit-animation-delay: 0.35s;
        -moz-animation-delay: 0.35s;
}
.cssload-thecube .cssload-c3:before {
    animation-delay: 0.69s;
        -o-animation-delay: 0.69s;
        -ms-animation-delay: 0.69s;
        -webkit-animation-delay: 0.69s;
        -moz-animation-delay: 0.69s;
}
.cssload-thecube .cssload-c4:before {
    animation-delay: 1.04s;
        -o-animation-delay: 1.04s;
        -ms-animation-delay: 1.04s;
        -webkit-animation-delay: 1.04s;
        -moz-animation-delay: 1.04s;
}



@keyframes cssload-fold-thecube {
    0%, 10% {
        transform: perspective(438px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
                75% {
        transform: perspective(438px) rotateX(0deg);
        opacity: 1;
    }
    90%,
                100% {
        transform: perspective(438px) rotateY(180deg);
        opacity: 0;
    }
}

@-o-keyframes cssload-fold-thecube {
    0%, 10% {
        -o-transform: perspective(438px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
                75% {
        -o-transform: perspective(438px) rotateX(0deg);
        opacity: 1;
    }
    90%,
                100% {
        -o-transform: perspective(438px) rotateY(180deg);
        opacity: 0;
    }
}

@-ms-keyframes cssload-fold-thecube {
    0%, 10% {
        -ms-transform: perspective(438px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
                75% {
        -ms-transform: perspective(438px) rotateX(0deg);
        opacity: 1;
    }
    90%,
                100% {
        -ms-transform: perspective(438px) rotateY(180deg);
        opacity: 0;
    }
}

@-webkit-keyframes cssload-fold-thecube {
    0%, 10% {
        -webkit-transform: perspective(438px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
                75% {
        -webkit-transform: perspective(438px) rotateX(0deg);
        opacity: 1;
    }
    90%,
                100% {
        -webkit-transform: perspective(438px) rotateY(180deg);
        opacity: 0;
    }
}

@-moz-keyframes cssload-fold-thecube {
    0%, 10% {
        -moz-transform: perspective(438px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
                75% {
        -moz-transform: perspective(438px) rotateX(0deg);
        opacity: 1;
    }
    90%,
                100% {
        -moz-transform: perspective(438px) rotateY(180deg);
        opacity: 0;
    }
}