/********************************************general mobile settings**********************************************************/
@media all and (max-width: 64em), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    

    
.homedisplay {width: 100vw; ; height: 90vh;  z-index: 10; display: block; margin: 0px; padding: 0px; }
    
.in_the_middle {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border: 0px solid #ff9; width: 100%; margin: 0px; padding: 0px;}
    

    
.homeheader {width: calc(100% - 0px); margin: 0px; position: absolute; top: 0px; ; height: 70px; background: var(--main)}
    
.logo_main {height: 20px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); display: none}
.logo_main_mob {height: 34px;  display: block; position: relative; top: 20px; left: 20px}
.logs {display: inline-block; right: 20px; position: absolute; bottom: 16px}
.logs a {font-size: 1em; font-weight: 300; color: var(--white); margin: 0px 0px 0px 20px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2)}
.logs .butt {background: var(--white); font-size: 1em; font-weight: 300!important;letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);  display: inline-block; color: var(--main);
padding: 4px 12px; line-height: 1.3em; border-radius: 1.3em; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
    
#large-header {  
  overflow-x: hidden;
    overflow-y: auto;
  background-size: cover;
  background-position: center center;
  z-index: 1; position: fixed; top: 0px; left: 0px; background-image: url("https://storage.googleapis.com/bkede/static/img/be_mob.jpg");
}

#demo-canvas {opacity: 0}

.homedisplay h1 {
   font-size: 1.9rem; font-weight: 600!important;letter-spacing: 0px;  line-height: 1.3em;  width: calc(100vw - 20px); border: 0px solid #ff9; 
}
    
.homedisplay h5 { font-size: 1em; font-weight: 250!important;letter-spacing: 1px; line-height: 1.2em;  width: calc(100% - 40px)!important; border: 0px solid #ff9; padding: 0px 20px 0px 20px}


.homedisplay h2 {color: var(--grey1); font-size: 1.6em; font-weight: 150!important;letter-spacing: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-family: 'DM'; line-height: 1.2em}
.homedisplay h4 {color: var(--grey2); font-size: 3.2em; font-weight: 100!important;letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.2em; text-align: center}

.homedisplay .quote { font-size: 1.2em; margin-top: 30px; display: block}

    
.button { font-size: 1em; font-weight: 250!important;letter-spacing: 1px!important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);  display: inline-block; color: var(--vlightbg);
padding: 8px 30px; line-height: 1.3em; } 
    
.smallbutton, input[type=file]::file-selector-button {font-size: 1.0em; font-weight: 350;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 1px; background: var(--slightbg); border: 1px solid var(--bgdark); color: var(--main); line-height: 1.4em; padding: 0px 15px; border-radius: 1.0em; text-transform: uppercase; cursor: pointer; transition: 0.3s;}
.smallbutton:hover, input[type=file]::file-selector-button:hover {border: 1px solid var(--main); background: var(--white)}
.smallbutton i {font-size: 80%; transform: translateY(-1px); color: var(--lightmain); margin-left: 3px}
    
    
.smallbutton1 {font-size: 0.9em; font-weight: 350;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 1px; background: var(--bgdark); border: 1px solid var(--main); color: var(--main); line-height: 1.4em; padding: 2px 35px; border-radius: 1.0em; text-transform: uppercase; cursor: pointer; transition: 0.3s; opacity: 0.8}
.smallbutton1:hover {border: 1px solid var(--main); background: var(--white)}
    
    
.answering_tmp h5 {font-size: 1.0em!important; }
.answering_tmp i {font-size: 1.0em; color: var(--bgvdark);  margin: 0px 0px 0px 5px}
    
.footerpage {margin: 20px 0px 20px}
.footerpage p {margin-bottom: 25px; font-size: 0.9em!important; line-height: 1.2em}
.footerpage .br {margin: 3px 0px;  display: block}
.footerpage h2 {margin: 0px 0px 10px; font-size: 1.15em!important; line-height: 1.2em; font-weight: 450; color: var(--main)}
.footerpage h4 {margin: 30px 0px 10px; font-size: 1.05em!important; line-height: 1.2em; font-weight: 450; color: var(--main)}
.footerpage h5 { font-size: 1.3em!important; font-weight: 450; color: var(--main)}
.footerpage h6 { font-size: 1.0em!important; font-weight: 350; color: var(--lightmain)}
.footerpage ul { list-style-position: outside; margin: -20px 0px 20px -1.6em; }
.footerpage li {font-size: 0.9em!important; color: var(--lightmain)}
.footerpage li span {font-size: 1em!important; font-weight: 200!important; color: var(--text)}    
    
.accordio > div input + label {
  font-size: 1.0em; margin-bottom: 5px
}
.olist {
  margin: 0px;
  padding: 0px 0px 30px 0px ; font-weight: 250; font-size: 0.90em; line-height: 1.3em
}
    
/* sectors */

.sectors h1 {color: var(--main); font-size: 1.6em; font-weight: 550; margin: 0px 0px 30px; text-transform: none}
.sectors h2 {color: var(--text); font-size: 1.2em; font-weight: 300; margin: 0px 0px 10px}
.sectors h2 a { font-weight: 450}


.sectors h3 {color: var(--main); font-size: 1.2em!important; font-weight: 450; margin: 0px 0px 0px}
.sectors h4 {color: var(--main); font-size: 1.0em!important; font-weight: 300; margin: 0px 0px 20px}
.sectors h5 {color: var(--dtext); font-size: 0.95em!important; font-weight: 300; margin: 0px 0px 20px; line-height: 1.2em; letter-spacing: 0px}
.sectors h6 {color: var(--main); font-size: 1.05em!important; font-weight: 350; margin: 35px 0px 10px; line-height: 1.1em}
.sectors p {color: var(--text); font-size: 0.9em!important; font-weight: 250!important; margin: 0px 0px 10px; line-height: 1.1em}
.sectors .pextra {margin: 15px 0px 10px}
.sectors li span {color: var(--text);  font-weight: 250; }
.sectors li  {color: var(--lightmain); font-size: 0.9em!important; font-weight: 250!important; margin: 0px 0px 7px; line-height: 1.1em}
.sectors ul  {list-style-position: outside;  padding-left: 1em; margin: 0px}

/* end sectors */
    
.mainfooter { height: 220px}


/* footer*/
.footwrapper {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 55% 40% ;
  padding: 25px 0px 0px;
  margin: 0px 10px;
  width: calc(100% - 20px)
}
.footbox {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.f1 {grid-row: 1 / span 2;  grid-column: 1; padding-right: 0px}  
.f2 {grid-row: 1;  grid-column: 2; padding-right: 0px}  
.f4 {grid-row: 2;  grid-column: 2; padding-right: 10px; height: auto; position: relative}  
.f3 {grid-row: 3;  grid-column: 1 ; padding-right: 0px; padding-top: 10px}  
.f5 {grid-row: 3 ;  grid-column: 2; padding-right: 0px; position: relative; padding-top: 10px}  
    
.f4 a {position: absolute; top: 0px; left: 0px}

.footwrapper h5 {font-size: 0.9em; }

    .langs {position: absolute; bottom: 0px}
    
/* end footer*/  
    
    
.commercial{ font-size: 0.8em;}
.commercial option { font-size: 0.9em}
    

    
    /* 2 columns */
.wrappertwo {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.boxtwo {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.k1aa {grid-row: 1;  grid-column: 1 } 
.k1a {grid-row: 1;  grid-column: 1} 
.k1b {grid-row: 2;  grid-column: 1} 

.k2aa {grid-row:3;  grid-column: 1 } 
.k2a {grid-row: 3;  grid-column: 1} 
.k2b {grid-row: 4;  grid-column: 1} 

.k3aa {grid-row: 5;  grid-column: 1 } 
.k3a {grid-row: 5;  grid-column: 1} 
.k3b {grid-row: 6;  grid-column: 1} 

.k4aa {grid-row: 6;  grid-column: 1 } 
.k4a {grid-row: 6;  grid-column: 1} 
.k4b {grid-row: 7;  grid-column: 1} 

.k5aa {grid-row: 8;  grid-column: 1 } 
.k5a {grid-row: 8;  grid-column: 1} 
.k5b {grid-row: 9;  grid-column: 1} 

.k6aa {grid-row: 10;  grid-column: 1 } 
.k6a {grid-row: 10;  grid-column: 1} 
.k6b {grid-row: 11;  grid-column: 1} 
/* end 2 columns */
    
    /* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.boxthree {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.h1aa {grid-row: 1;  grid-column: 1 } 
.h1a {grid-row: 1;  grid-column: 1; padding-right: 0px} 
.h1b {grid-row: 2;  grid-column: 1; padding-left: 0px} 
.h1c {grid-row: 3;  grid-column: 1; padding-left: 0px} 

/* end 3 columns */
    
    
.contentdisplay {width: calc(100% - 40px); margin: 30px 20px 50px; border: 0px solid #f90}  
    
.contentdisplay h1 {font-size: 1.2em!important;letter-spacing: 0px}
.contentdisplay h5 {font-size: 1.0em; margin: 0px!important; white-space: normal!important}
    
.contentdisplay h2 {font-size: 1.1em;}
    
.contentdisplay p { font-size: 0.9em;  line-height: 1.2em} 
.contentdisplay .ask_db {font-size: 14px!important;}

.contentdisplay .step {font-size: 0.9em; color: var(--main); font-weight: 400; margin: 30px 0px 0px 0px}
.contentdisplay .step span {font-size: 1em; color: var(--main); font-weight: 400; margin: 30px 0px 0px 0px}
.contentdisplay .step a {color: var(--lightmain); font-weight: 300}
.contentdisplay .step b::after { content: ": ";}
.contentdisplay .step b { width: 60px!important; display: inline-block;font-size: 1em}

.reduced {width: calc(100% - 0px)!important; transform: translateX(0px)!important}

.contentdisplay .expl {margin-left: 0px}
.contentdisplay .expl h6 { font-size: 1.0em; color: var(--main); font-weight: 300; margin: 10px 0px 0px 0px;}
.contentdisplay .expl p { font-size: 0.8em; color: var(--ltext); font-weight: 300; margin: 10px 0px 0px 0px; line-height: 1.4em}
.contentdisplay .expl p.red { font-size: 1.0em; color: var(--red); font-weight: 300; margin: 10px 0px 0px 0px; line-height: 1.4em}
.contentdisplay  .det { font-size: 1em; color: var(--vltext); font-weight: 200; margin: 0px 0px 0px 5px;}
    
.single_upload  .det, .explalert .det { font-size: 0.7em; color: var(--vltext); font-weight: 200; margin: 10px 0px 0px 0px!important;}
    
.contentdisplay .expl  .det { font-size: 0.8em; color: var(--vltext); font-weight: 200; margin: 10px 0px 40px 0px!important;}
    
.disclaimer    {z-index: 9999999; display: table;  width: calc(100% - 40px); margin: 0px 20px 30px; font-size: 0.6em; line-height: 1.1em; color: var(--vltext)}
    
.ex_databases label { font-size: 1.0em;}
.ex_databases i { font-size: 1.0em; }
    
/* QnAs */

.questions  {font-size: 0.95em!important}
.answers  {font-size: 0.95em!important; }
.answers b {color: var(--main); font-style: normal; font-weight: 600!important;  margin-top: 0px}
.answering   {font-size: 1em!important; color: var(--text)!important; font-style: italic; font-weight: 350!important}
.answering b {color: var(--main); font-style: normal; font-weight: 600!important;  margin-top: 20px}

.questions i {color: var(--vlightmain); font-size: 0.85em; transform: translateY(-1px)}
.answers i {color: var(--vlightmain); font-size: 0.8em; transform: translateY(-1px)}
    

/* end QnAs */
.config_forms {margin-top: 0px!important}

.fomrtittle  {font-size: 1.0em; font-weight: 300; color: var(--dtext)}

    
.label, .reset_pass label {font-size: 1em; }
.input_text {font-size: 1.0em; }
    
.p80 {font-size: 80%!important;}
    
.popup {width: 75%; padding: 20px 40px; border: 1px solid var(--bg); box-shadow: 1px 1px 2px rgba(0,0,0,0.1)}
    

.margin10 {margin: 10px 0px 0px!important}
.margin20 {margin: 15px 0px 0px!important}
.margin30 {margin: 20px 0px 0px!important}
.margin40 {margin: 25px 0px 0px!important}
.margin50 {margin: 30px 0px 0px!important}
.margin60 {margin: 35px 0px 0px!important}
.margin70 {margin: 70px 0px 0px!important}
.margin90 {margin: 45px 0px 0px!important} 
    
.nomobile {display: none!important} 
   
.reduced {width: calc(100% - 140px); transform: translateX(50px)}
    

.ckbutton {font-size: 1em; font-weight: 300;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 1px; background: var(--main); border: 0px solid var(--bgvdark); color: var(--slightbg); line-height: 1.6em; padding: 0px 40px; border-radius: 1.6em; text-transform: uppercase; cursor: pointer; transition: 0.3s;}
    
.home_form .button {font-size: 90%!important; padding: 7px 12px}

    
.home_form {border: 0px solid var(--vlightmain); display: table; margin: 20px auto 0px; width: 85%; padding: 10px 20px 20px;}
.home_form h3 {color: var(--main); font-size: 1.3em; font-weight: 250!important;letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.6em; margin: 0px}
    
    
/* 2 responsive columns */

.row2 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row2:after {
  content: "";
  display: table;
  clear: both;
}
.column2 {
  float: left;
  width: calc(100% - 0px); 
  padding: 0px 0px!important; border: 0px solid #f09; margin: 0px
}
/* end 2 responsive columns */
    
/* kpi columns */


.kpi_cols {column-count: 1; column-gap: 00px}

/* end kpi columns */

.kpi_list h1 {font-size: 1.05em!important; font-weight: 350!important; color: var(--main); ; margin: 0px 0px 5px 10px; text-transform: none!important; letter-spacing: 0px}
.kpi_list ol {margin: 0px 0px 0px -1em}
.kpi_list li {font-size: 0.95em; font-weight: 300; color: var(--main); ; margin: 0px 0px 5px;}
.kpi_list li span {font-size: 0.95em; font-weight: 200; color: var(--text); }


#includedKpis {border: 0px solid #d90; margin: 20px 0px 10px;}
    
    
/* 3 responsive columns */

.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row3:after {
  content: "";
  display: table;
  clear: both;
}
.column3 {
  float: left;
  width: calc(100% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}
    .column3:last-child {
  float: left;
  width: calc(100% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px 0px 60px!important
}
    
.col3 {
  float: left;
  width: calc(50% - 10px); 
  padding: 0px 5px!important; border: 0px solid #f09; margin: 0px
}
    .col3:last-child {
  float: left;
  width: calc(100% - 10px); 
  padding: 0px 5px!important; border: 0px solid #f09; margin: 0px 0px!important
}
    
    /* end 3 responsive columns */
.homecard {border: 0px solid #49f; width: 98%; margin:10px 1% 0px; padding: 0px!important; text-align: center}
    
.homecard img {height: 60px ; margin: 0px 0px 0px}
.homecard h5 {font-size: 1.2em; font-weight: 200; color: var(--main); text-transform: uppercase; text-align: center!important; border: 0px solid #560; width: 100% ; margin: 5px 0px 0px!important}
.homecard p {font-size: 1.0em; font-weight: 100; color: var(--dtext); margin: 0px!important; }

.homedisplay h1 { font-size: 2.2em}

   /* 4 responsive columns */

.row4 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row4:after {
  content: "";
  display: table;
  clear: both;
}
.column4 {
  float: left;
  width: calc(50% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

/* end 4 responsive columns */ 
    
.titol { font-size: 1.2em;  }
    
.kedetable th { font-weight: 450}
.kedetable td {padding: 5px 3px; color: var(--ltext); font-weight: 250}

.kedetable td, .kedetable th {border-right: 1px solid var(--vlightmain); font-size: 0.85em}
.kedetable i {color: var(--main); margin: 0px 3px; font-size: 0.85em}
    

}