@charset "UTF-8";
/* CSS Document */

/*colours*/
:root {
    --main: #575D77; /*87, 93, 119*/
    --lightmain: #787D92; /*120,125,146*/
    --vlightmain: #9A9DAD; /*154,157,173*/
    --slightmain: #cccfdf; /*204, 207, 223*/
    --xlightmain: #eaedfd; /*234, 237, 253*/
    --bg: #F7F8F5; /*247,248,245*/
    --bgfoot: rgba(87, 93, 119, 0.9);
    --bg1: #ecede8; /*236, 237, 232*/
    --bgdark: #cbccc1; /*203,204,193*/
    --bgvdark: #c1c2b7; /*193,194,183*/
    --bgldark: #d0d1c6; /*208,209,198*/
    --vlightbg: #f7f7f5; /*247, 247, 245*/
    --slightbg: #FCFDFA; /*252,253,250*/
    --text: #222; /*34,34,34*/
    --dtext: #222; /*34,34,34*/
    --ltext: #444; /*34,34,34*/
    --vltext: #666; /*34,34,34*/
    --sltext: #aaaaaa; /*34,34,34*/
    --lighttext: #555; /*34,34,34*/
    --red: #D3423D; /*211,66,61*/
    --verd: #159947; /*21,153,71*/
    --white: #ffffff;
    --black: #000000;
    --grey1: #4D4D4D;
    --grey2: #777777;
}


/* fonts */
@font-face {
  font-family: "DM";
  src: url("../fonts/DMSans.ttf") format("truetype-variations");
  font-weight: 100 1000;
} 
@font-face {
  font-family: "JosefinSlab";
  src: url("../fonts/JosefinSlab.ttf") format("truetype-variations");
  font-weight: 100 1000;
} 

body, html {font-size: 1em; font-family: 'DM', sans-serif; font-weight: 300; color: var(--text); background: var(--bg)!important; overflow-x: hidden}
body, html, a, table, td, th, tr, p, h1,h2,h3,h4,h5,h6, hr, img {margin: 0px; padding: 0px}
body { display:flex; flex-direction:column;min-height: 100vh}
a {text-decoration: none; color: var(--main)}
a:hover {text-decoration: none}

p {color: var(--text); font-weight: 300; line-height: 1.1em; margin-bottom: 10px}

.clickable:hover {cursor: pointer;}
textarea {resize: none}

*:required {
  border-color: #800000;
  border-width: 3px;
}

.bgmob {background-position: center center!important; background-repeat: no-repeat!important; background-size: cover!important; }

.center {text-align: center!important}
.left {text-align: left!important}
.right {text-align: right!important}
.red {color: var(--red)}
.verd {color: var(--verd)}

.gradient1 {  background: var(--bgldark);
background: -moz-linear-gradient(180deg, var(--bgldark) 50%, var(--bg) 99%);
background: -webkit-linear-gradient(180deg, var(--bgldark) 50%, var(--bg) 99%);
background: linear-gradient(180deg, var(--bgldark) 50%, var(--bg) 99%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0d1c6",endColorstr="#f2f3f0",GradientType=1);  }

.gradient_l {  background: var(--bgldark);
background: -moz-linear-gradient(180deg, var(--bgldark) 50%, var(--bg) 99%);
background: -webkit-linear-gradient(180deg, var(--bgldark) 50%, var(--bg) 99%);
background: linear-gradient(180deg, var(--bgldark) 50%, var(--bg) 99%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0d1c6",endColorstr="#f2f3f0",GradientType=1);  }

#large-header {  
  overflow-x: hidden;
    overflow-y: auto;
  background-size: cover;
  background-position: center center;
  z-index: 1; position: fixed; top: 0px; left: 0px
}

#demo-canvas {}

.in_the_middle {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%)}

.homedisplay {width: 100%; ; height: 90vh;  z-index: 10; display: block; margin: 0px; padding: 0px; }

.homedisplay h1 {
   font-size: 4.2em; font-weight: 500!important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-family: 'JosefinSlab'; line-height: 1.2em; text-transform: none;white-space: normal;
  -webkit-background-clip: text; border: 0px solid #79f; width: calc(100vw - 300px); letter-spacing: -0.5px; 
  -webkit-text-fill-color: transparent;
}

.grad_bg {background: var(--main);
background: -moz-linear-gradient(90deg, var(--main) 10%, var(--lightmain) 90%);
background: -webkit-linear-gradient(90deg, var(--main) 10%, var(--lightmain) 90%);
background: linear-gradient(90deg, var(--main) 10%, var(--lightmain) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666",endColorstr="var(--dtext)333",GradientType=1);}

.homedisplay h2 {color: var(--grey1); font-size: 4.1em; font-weight: 250!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.1em; font-weight: 100!important;letter-spacing: 7px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.2em}
.homedisplay h5 {color: var(--lightmain); font-size: 2.3em; font-weight: 150!important;letter-spacing: 2px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.2em}
/*
.homedisplay h6 {color: var(--grey2); font-size: 1.2em; font-weight: 200!important;letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.6em}
.homedisplay h3 {color: var(--main); font-size: 1.8em; font-weight: 250!important;letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.6em; margin: 65px 0px 0px}
*/
.homedisplay h3 b {font-weight: 350!important}

.homedisplay .quote { font-size: 0.8em; font-weight: 200; color: var(--lighttext); opacity: 0.7}

.single_upload {border: 0px solid #467; display: table; margin: 10px auto 0px}
.single_upload  .det { font-size: 0.75em; color: var(--vltext); font-weight: 200; margin: 0px 0px 0px 5px;}

.home_form .button {font-size: 90%!important; padding: 7px 12px}

.single_upload input[type=file]::file-selector-button {font-size: 1em; 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: 2px 25px; border-radius: 1.0em; text-transform: uppercase; cursor: pointer; transition: 0.3s; }

.home_results { margin: 200px 0px 0px; }


.home_form {border: 0px solid var(--vlightmain); display: table; margin: 30px auto 0px; padding: 10px 40px 30px; background: rgba(247, 247, 245,0.5); border-radius: 10px}
.home_form h3 {color: var(--main); font-size: 1.8em; font-weight: 250!important;letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); line-height: 1.6em; margin: 0px}

/*.button {color: var(--main); font-size: 1.4em; font-weight: 400!important;letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);  display: inline-block; }*/
.button {background: var(--main); font-size: 1.1em; font-weight: 250!important;letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);  display: inline-block; color: var(--vlightbg);
padding: 8px 30px; line-height: 1.3em; border-radius: 1.3em; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); transition: 0.3s;}
.button .arrow {position: relative; bottom: 2px}
.little1 { color: var(--lightmain); font-size: 0.8em; margin: 0px 3px}

.margin10 {margin: 10px 0px 0px!important}
.margin20 {margin: 20px 0px 0px!important}
.margin30 {margin: 30px 0px 0px!important}
.margin40 {margin: 40px 0px 0px!important}
.margin50 {margin: 50px 0px 0px!important}
.margin60 {margin: 60px 0px 0px!important}
.margin70 {margin: 70px 0px 0px!important}
.margin90 {margin: 90px 0px 0px!important}

.p80 {font-size: 80%; font-weight: 300}
.p70 {font-size: 70%; font-weight: 300; color: var(--vltext)}

.homeheader {width: calc(100% - 300px); margin: auto 150px 0px; position: absolute; top: 70px; border: 0px solid #f09}
.logo_main {height: 40px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); display: block}
.logo_main_mob {height: 40px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); display: none}
.logs {display: inline-block; right: 0px; position: absolute; bottom: 0px}
.logs a {font-size: 1.1em; font-weight: 400; color: var(--main); margin: 0px 0px 0px 15px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2)}
.logs .butt {background: var(--main); font-size: 1.1em; font-weight: 250!important;letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);  display: inline-block; color: var(--vlightbg);
padding: 4px 12px; line-height: 1.3em; border-radius: 1.3em; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); }

/* footer*/

.mainfooter {width: 100%; background: var(--bgfoot); margin: 0px; padding: 0px 0px 50px 0px  ; height: 120px; z-index: 10; display: block;border-top: 0px solid var(--bgvdark);}
.footwrapper {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 22% 22% 22% 22% 12% ;
  padding: 15px 0px 0px;
  margin: 0px 150px;
  width: calc(100% - 300px)
}
.footbox {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.f1 {grid-row: 1;  grid-column: 1; padding-right: 10px}  
.f2 {grid-row: 1;  grid-column: 2; padding-right: 10px}  
.f3 {grid-row: 1;  grid-column: 3; padding-right: 10px}  
.f4 {grid-row: 1;  grid-column: 4; padding-right: 10px}  
.f5 {grid-row: 1;  grid-column:5; padding-right: 10px}  

.footwrapper h5 {font-size: 0.9em; color:var(--bg1); font-weight: 250; line-height: 1.6em; text-shadow: 1px 1px 2px rgba(0,0,0,0.1)}
.footwrapper h5:hover { color: var(--white)}

.commercial{background: none!important; border: none!important; color: var(--bg1)!important; font-size: 0.8em; font-weight: 400; padding: 2px 1px!important}
.commercial option {background: none!important; border: none!important; color: #000!important; font-size: 0.9em; font-weight: 400}

.commercial {border: 1px solid rgba(255,255,255,0.2)!important}

.disclaimer {z-index: 9999999; display: table;  width: calc(100% - 300px); margin: 0px 150px 30px; font-size: 0.6em; line-height: 1.1em; color: var(--sltext)}

.langs {font-size: 0.8em; text-align: right; display: none}
.langs  input {background: none!important; border: none!important; display: inline-block; font-weight: 300; color: var(--xlightmain); font-size: 0.9em; cursor: pointer}
.langs  span, .langs  form { display: inline-block}
.langs  span {color: var(--vlightmain)}
.selected_lang input {color: var(--lightmain)!important; pointer-events: none}

/* end footer*/

.contentdisplay {flex-grow: 1; width: calc(100% - 300px); margin: 90px 150px}

.contentdisplay h1 {font-size: 1.7em!important; color: var(--main); font-weight: 500; letter-spacing: 2px; text-transform: uppercase}
.contentdisplay h2 {font-size: 1.4em; color: var(--main)!important; font-weight: 300; letter-spacing: 0px}
.contentdisplay h2 b { font-weight: 500; }
.contentdisplay h3 {font-size: 1.5em; color: var(--main)!important; font-weight: 400; letter-spacing: 0px}
.contentdisplay h3 .down {font-size: 0.6em; color: var(--main)!important; margin-left: 5px; transform: translateY(-2px)}
.contentdisplay .step {font-size: 1.2em; color: var(--main); font-weight: 400; margin: 60px 0px 0px 0px}
.contentdisplay .step_sub {font-size: 1.1em; color: var(--main); font-weight: 300; margin: 60px 0px 0px 0px}
.contentdisplay .stepalert {font-size: 1.2em; color: var(--main); font-weight: 400; margin: 20px 0px 0px 0px}
.contentdisplay .step a, .contentdisplay .step .not_active {color: var(--lightmain); font-weight: 250}
.contentdisplay .step a, .contentdisplay .step .yes_active {cursor: default}
.contentdisplay .step b::after { content: ": ";}
.contentdisplay .step b { width: 75px!important; display: inline-block;}

.contentdisplay h4 {font-size: 1.2em; color: var(--main); font-weight: 400!important; margin: 10px 0px 30px}

.contentdisplay h5 {font-size: 1.2em; color: var(--text); font-weight: 300!important; margin: 70px 25% 30px; white-space: nowrap}

.contentdisplay p { font-size: 1.1em; color: var(--text); font-weight: 200!important; margin: 0px; line-height: 1.3em}

.contentdisplay .expl {margin-left: 80px}
.contentdisplay .explalert {margin: 15px 0px 0px 0px}
.contentdisplay .expl h6 { font-size: 1.05em; color: var(--main); font-weight: 300; margin: 10px 0px 0px 0px;}
.contentdisplay .expl p { font-size: 0.95em!important; color: var(--ltext); font-weight: 350!important; margin: 10px 0px 0px 0px; line-height: 1.3em}
.contentdisplay .expl p.red { font-size: 0.95em; color: var(--red); font-weight: 300; margin: 10px 0px 0px 0px; line-height: 1.3em}
.contentdisplay  .det { font-size: 0.75em; color: var(--vltext); font-weight: 200; margin: 0px 0px 0px 5px;}

.contentdisplay .expl h5 { font-size: 1.0em; color: var(--main); font-weight: 300; margin: 10px 0px 0px 0px; display: inline}
.contentdisplay .expl h4 { font-size: 0.9em; color: var(--dtext); font-weight: 200; margin: 10px 0px 0px 0px; display: inline}


.nextquestion {font-size: 1.2em; color: var(--main); font-weight: 550!important; margin: 10px 0px 0px 0px; border-top: 1px solid var(--bgdark); padding: 10px 0px 0px}
.contentdisplay .expl1 {margin-left: 0px}

.discovering_display {width: 100%; height: 220px; border: 0px solid #f89; background-size: cover!important; background-position: center center; background-repeat: no-repeat; position: relative}
.answering_tmp h5, .answering_tmp1 h5 {font-size: 1.1em; color: var(--main); font-weight: 200!important; letter-spacing: 1px; margin: 0px 5px 0px 0px; text-transform: uppercase}
.answering_tmp i, .answering_tmp1 i {font-size: 0.8em; color: var(--bgvdark);  margin: 0px 0px 0px 5px}

.answering_tmp1 {position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%)}

.home_results h6 {font-size: 1.0em; color: var(--text); font-weight: 200!important; letter-spacing: 0px; margin: 5px 0px 0px 0px;}
.home_results h3 {font-size: 1.0em; color: var(--main); font-weight: 300!important; letter-spacing: 0px; margin: 20px auto 0px ; border: 0px solid #400; display: table}


.label, .reset_pass label {font-size: 1.3em; font-weight: 200; color: var(--text); }
.star { font-weight: 100; color: var(--main); }
.fomrtittle  {font-size: 1.4em; font-weight: 300; color: var(--dtext)}
.input_text, .reset_pass input {margin: 7px 0px 0px; width: 100%; background: var(--slightbg); border: 1px solid var(--bg1); ; font-size: 1.05em; font-weight: 200; color: var(--ltext); padding: 8px 5px 4px 5px; ;font-family: 'DM'}
.input_text:focus,  #id_email:focus {border: 1px solid var(--bgldark)!important;outline: none!important}
.input_text::placeholder, #id_email::placeholder {color: var(--main); font-size: 0.55em}

.input_text:-webkit-autofill,
.input_text:-webkit-autofill:hover, 
.input_text:-webkit-autofill:focus, 
.input_text:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--slightbg);
}

.input_text.jf-required {
    border: 2px solid red;
}

#myRequests {border: 1px solid var(--vlightmain)!important; background: none!important; margin: 0px 0px 0px 5px; padding: 0px 5px; color: var(--ltext)!important}


.ckbutton {font-size: 1.3em; font-weight: 300;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 2px; 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;}
.ckbutton_nt {font-size: 1.3em; font-weight: 300;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 2px; 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;}

.config_forms {margin-top: 80px!important}

.smallbutton, input[type=file]::file-selector-button {font-size: 0.9em; 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: 0px 15px; 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)}



.small_selected {font-size: 1.0em; font-weight: 400;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 1px;  color: var(--main); line-height: 1.6em; padding: 0px 0px; text-transform: uppercase; cursor: text}

.select {margin: 0px; min-width: 50%; background: none; border: 0px solid #999; border-bottom: 1px solid var(--bgdark); font-size: 1.1em; font-weight: 200; color: var(--ltext); padding: 4px 90px 2px 0px; ;font-family: 'DM'}

.filename {font-size: 1.1em; font-weight: 250; color: var(--ltext)}
.filename i {font-size: 0.7em; color: var(--main); margin-left: 10px}

.labelalert {font-size: 1.05em; font-weight: 200; color: var(--text); }
.explalert p { font-size: 0.95em; color: var(--ltext); font-weight: 300; margin: -10px 0px 0px 0px; line-height: 1.3em}


.download_pdf {width: 100%; background: none; position: relative; height: 30px; margin-top: 40px}


.vert_middle {position: absolute;  top: 50%; transform:  translateY(-50%); border: 0px solid #f90; width: calc(100% - 300px); margin: 0px 150px}
.vert_middle1 {border: 0px solid #f90; margin: 0px 0px; }
.vert_middle2 {min-height: 50vh;   border: 0px solid #f90; margin: 0px 0px;display: flex;
  justify-content: center;
  align-items: center;}

.homecard {border: 0px solid #49f; width: 90%; margin: 60px 5% 60px; padding: 0px!important; text-align: center}

.homecard img {height: 70px ; margin: 0px 0px 0px}
.homecard h5 {font-size: 2.1em; font-weight: 400!important; color: var(--main); text-transform: uppercase; text-align: center!important; border: 0px solid #560; width: 100% ; margin: 20px 0px 0px!important}
.homecard p {font-size: 1.2em; font-weight: 200!important; color: var(--dtext); margin: 0px 5%; }

.titol {font-weight: 300; font-size: 1.4em; color: var(--main); }

.login_error p {font-weight: 200!important; color: var(--red)}
.makeRed { border-bottom: 1px solid var(--red)!important}

/* 2 columns */
.wrappertwo {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  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 / span 2} 
.k1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.k1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 

.k2aa {grid-row:2;  grid-column: 1 / span 2} 
.k2a {grid-row: 2;  grid-column: 1; padding-right: 10px} 
.k2b {grid-row: 2;  grid-column: 2; padding-left: 10px} 

.k3aa {grid-row: 3;  grid-column: 1 / span 2} 
.k3a {grid-row: 3;  grid-column: 1; padding-right: 10px} 
.k3b {grid-row: 3;  grid-column: 2; padding-left: 10px} 

.k4aa {grid-row: 4;  grid-column: 1 / span 2} 
.k4a {grid-row: 4;  grid-column: 1; padding-right: 10px} 
.k4b {grid-row: 4;  grid-column: 2; padding-left: 10px} 

.k5aa {grid-row: 5;  grid-column: 1 / span 2} 
.k5a {grid-row: 5;  grid-column: 1; padding-right: 10px} 
.k5b {grid-row: 5;  grid-column: 2; padding-left: 10px} 

.k6aa {grid-row: 6;  grid-column: 1 / span 2} 
.k6a {grid-row: 6;  grid-column: 1; padding-right: 10px} 
.k6b {grid-row: 6;  grid-column: 2; padding-left: 10px} 
/* end 2 columns */


/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 33.3% 33.4% 33.3% ;
  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 / span 2} 
.h1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.h1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 
.h1c {grid-row: 1;  grid-column: 3; padding-left: 10px} 

/* end 3 columns */

.accept_tc input[type="checkbox"]  { 
  -webkit-appearance: none;
  appearance: none;
  background: var(--white);
  margin: 10px 10px 0px 0px;
  font: inherit;
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid #ccc;
  transform: translateY(-6px);
cursor: pointer;
  display: grid;
  place-content: center;
    border-radius: 1em
}

.accept_tc input[type="checkbox"]::before {
  content: "";
  width: 0.99em;
  height: 0.99em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--main);
    border-radius: 0.9em
}

.accept_tc input[type="checkbox"]:checked::before {
  transform: scale(0.75);
}

.disabled1 {opacity: 0.5!important; cursor: text;}
.disabled {opacity: 0.9} 

.fadein {
  animation: fadein 1s ease;
  -moz-animation: fadein 1s ease-out; /* Firefox */
  -webkit-animation: fadein 1s ease; /* Safari and Chrome */
  -o-animation: fadein 1s ease; /* Opera */
  opacity: 0;
  animation-fill-mode: forwards;
}


.req_table {border: 0px solid #f98; margin: 0px}
.req_table tr {padding-bottom: 95px; background: var(--vlightbg)}
.req_table td {padding: 5px; border-bottom: 1px solid var(--bg); height: 2.5em; line-height: 1.6em; font-size: 1.05em}
.req_table td:first-child {background: var(--vlightbg); color: var(--lightmain); font-weight: 400; line-height:1.6em;}
/*.req_table i {color: var(--vlightbg); font-size: 0.8em; line-height: 1.6em; height: 1.6em; width: 1.6em; text-align: center; background: var(--vlightmain); border-radius: 1.4em} */
.req_table .options i {color: var(--main)!important; font-size: 0.9em; line-height: 1.6em; background: none; }
.req_table .options {color: var(--ltext)!important; font-size: 0.85em; line-height: 1.6em; background: none; font-weight: 200 }
.req_table .options a {color: var(--main)!important;  font-weight: 400 }

.kederesponse {font-size: 1em; color: var(--text); font-weight: 300; margin: 0px 0px 10px}

.extraquestion {margin: 20px 0px}
.extraquestion .input_text::placeholder {color: var(--main); font-size: 0.9em!important; font-weight: 400}


.thankyou {top: calc(50% - 60px)!important}

.thankyou h2 {font-size: 4.1em; font-weight: 350!important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-family: 'JosefinSlab'; text-align: center; color: var(--main); letter-spacing: 2px}
.thankyou h3 {font-size: 1.7em; font-weight: 200!important;  text-align: center; color: var(--lightmain); margin: 10px 0px 50px}
.thankyou h5 {font-size: 1.1em; font-weight: 250!important;  text-align: left; color: var(--text)}

.kedetable {border: 1px solid var(--vlightmain); text-align: left; border-right: 0px solid #f98}
.kedetable td {border-bottom: 1px solid var(--vlightmain)}
.kedetable tr:last-child td {border-bottom: 0px solid var(--vlightmain)}
.kedetable th {background: var(--slightmain); border-bottom: 1px solid var(--vlightmain); padding: 5px 3px; color: var(--main); font-weight: 500}
.kedetable td {padding: 5px 3px; color: var(--ltext); font-weight: 250}

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


.pricetable {border: 1px solid var(--vlightmain); text-align: left; border-right: 0px solid #f98}
.pricetable td {border-bottom: 1px solid var(--vlightmain)}
.pricetable tr:last-child td {border-bottom: 0px solid var(--vlightmain); padding: 10px 0px}
.pricetable th {background: var(--slightmain); border-bottom: 1px solid var(--vlightmain); padding: 5px 3px; color: var(--main); font-weight: 500; font-size: 1.1em}
.pricetable td {padding: 5px 3px; color: var(--text); font-weight: 350; font-size: 1.05em}

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

.pricetable h6 {font-size: 0.7em; font-weight: 200; color: var(--ltext)}


.con_ill {min-height: 250px; background-size: contain!important; background-position: center center!important; background-repeat: no-repeat!important; transform: translateY(-50px)}

.wtf {font-size: 3em}

/*pagination*/

.pagination {margin: 10px auto; font-size: 0.9em; font-weight: 500; letter-spacing: 3px; color: #777; text-decoration: none}
.pagination a {text-decoration: none; color: var(--main); font-weight: 400}
.pagination i {text-decoration: none; color: var(--vlightmain)}
.pagination i:hover {text-decoration: none; color: var(--main)}
.pagination .prevnext_off {text-decoration: none; color: #ccc!important; opacity: 0.1}

/*end pagination*/

/* QnAs */
.ng-scope {margin: 10px 0px!important; padding: 0px!important}

.questions  {font-size: 1.05em!important; color: var(--text)!important; font-style: italic; font-weight: 400!important ; line-height: 1.3em!important}
.questions b {color: var(--main); font-style: normal; font-weight: 600!important;  margin-top: 20px}
.answers  {font-size: 1.05em!important; color: var(--text)!important; font-style: normal; font-weight: 350!important; margin-top: 30px!important; line-height: 1.4em!important}
.answers b {color: var(--main); font-style: normal; font-weight: 600!important;  margin-top: 0px; white-space: nowrap}
.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 */

.butts2_table td {padding: 0px 10px}


.datestable h5 {font-size: 0.9em; color: var(--main); font-weight: 500!important; margin: 0px; padding: 0px}

.datestable td {height: 30px; line-height: 30px}
.datestable .date {border: 1px solid var(--bg1); background: var(--slightbg); font-family: 'DM'; padding: 2px 5px 2px 5px }

.datestable .date:focus {border: 1px solid var(--bgldark)!important;outline: none!important}


.datestable *::-webkit-calendar-picker-indicator {color: var(--main);margin: 0px 0px 0px 5px;}

.small_title {font-size: 1.1em; color: var(--main); font-weight: 300!important; margin: 0px; padding: 0px}

.histogram {border: 1px solid var(--slightmain); min-height: 300px}

/*delete pop up */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(213,214,203, 0.3);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
    width: 100vw; height: 100vh; z-index: 4000
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {background: var(--vlightbg); padding: 20px 40px; border: 1px solid var(--bg); box-shadow: 1px 1px 2px rgba(0,0,0,0.1)}
.popup .close {position: absolute; top: -2px; right: 5px; font-size: 1.4em; font-weight: 500; color: var(--lightmain); text-decoration: none}
.popup .close:hover {color: var(--main)}
.popup h5 {font-size: 1.01em; font-weight: 400; color: #111; margin: 20px 0px 10px 0px}
.popup p {font-size: 1.0em; font-weight: 300; color: #111; margin: 0px 0px 20px 0px}
.popup .butts {margin: 10px 0px 10px 0px; text-align: center}

.popup button {font-size: 1.0em; font-weight: 350;text-shadow: 1px 1px 2px rgba(0,0,0,0.1); letter-spacing: 1px; background: var(--bg); border: 1px solid var(--bgdark); color: var(--main); line-height: 1.6em; padding: 0px 20px; border-radius: 1.0em; text-transform: uppercase; cursor: pointer}
.popup button:hover {border: 1px solid var(--main);}


.footerpage {margin: 40px 0px 20px}
.footerpage p {margin-bottom: 25px; font-size: 1.05em!important; line-height: 1.2em; font-weight: 250!important}
.footerpage b {font-weight:350; color: var(--black)}
.footerpage .br {margin: 3px 0px;  display: block}
.footerpage h2 {margin: 30px 0px 10px; font-size: 1.45em!important; line-height: 1.2em; font-weight: 450; color: var(--main)}
.footerpage h4 {margin: 30px 0px 10px; font-size: 1.15em!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.25em!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: 1.2em!important; font-weight: 250!important; color: var(--text)}


.basiclist { list-style-position: outside; margin: 0px; border: 0px solid #f90; padding: 0px}
.basiclist li {font-size: 1.1em!important; color: var(--lightmain); margin: 0px 0px 5px 10px}
.basiclist li span {font-size: 1.05em!important; font-weight: 250!important; color: var(--text)}

@keyframes fadein { 0% { opacity: 0; }  100% { opacity: 1; } }

.d0 {  animation-delay: 0.1s;
    -moz-animation-delay:0.1s;
    -webkit-animation-delay:0.1s;
}
.d1 {  animation-delay: 0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
}

.d2 {  animation-delay: 0.3s;
    -moz-animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
}
.d3 {animation-delay: 0.4s;
    -moz-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;}

.d4 {  animation-delay:  0.5s;
    -moz-animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
}
.d5 {animation-delay: 0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;}

.d6 {  animation-delay: 0.7s;
    -moz-animation-delay:0.7s;
    -webkit-animation-delay:0.7s;
}
.d7 {animation-delay: 0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;}
.d8 {  animation-delay: 0.9s;
    -moz-animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
}
.d9 {animation-delay: 1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;}
   
.reduced {width: calc(100% - 80px)}

.status {font-size: 85%}


.scroll_div {max-height: 250px; border: 0px solid #f90;overflow-y:auto; overflow-x:hidden;  }

.ex_databases input[type=radio] { margin: 0px 10px 0px 0px!important}
.ex_databases label { margin: 0px 10px 0px 0px!important; font-size: 0.9em; font-weight: 300}
.ex_databases i { margin: 0px 10px 0px 0px!important; font-size: 0.8em; color: var(--main)}

/* 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(50% - 40px); 
  padding: 0px 20px!important; border: 0px solid #f09; margin: 0px
}

.col2 {
  float: left;
  width: calc(50% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

/* end 2 responsive columns */

/* kpi columns */


.kpi_cols {column-count: 2; column-gap: 20px}

/* 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;
  page-break-inside: avoid; /* For Firefox. */
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */}
.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(33.3% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

/* end 3 responsive columns */

/* 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(25% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

/* end 4 responsive columns */



.submenu {border: 0px solid #f98; margin: 3px 0px; text-align: center; padding: 4px 0px; font-size: 1.1em; text-transform: uppercase; display: block}
.submenu_a {font-weight: 450; background: var(--vlightmain); color: var(--white)}
.submenu_link {font-weight: 300; background: var(--slightmain); }



/***** Terms accordion**/
.accordio {
  width: 100%;
  height: 100%;
  float: left;
  padding: 0vw;
  z-index: 10;
  background-color: none;
  overflow: hidden;
  border: 0px solid #457; font-weight: 300;
  margin-bottom: -20px
    
}
.accordio:last-child {
  border: 0px solid #457;
  padding-bottom: 30px
}
.accordio > div {
  display: block;
  position: relative;
  padding: 0;
  color: black;
  min-height: 30px
}
.accordio > div:not(:last-of-type) {
  margin: 0px;
}

.accordio > div input + label {
  cursor: pointer;
  display: block;
  padding: 0px;
  /*transition: all ease-out 2.5s;*/
  font-size: 1.3em;
  font-weight: 300;
  border-bottom: 0px solid #000; color: var(--main);
}

.accordio > div input ~ div {
  visibility: hidden;
  max-height: 0px;
  opacity: 0;
  transition: max-height ease-out 1s,  visibility  0.5s ,  opacity  0.5s;
  width: 100%;
  margin: 0vh;
}

.accordio  label::before  {
    content: "+ ";
    color: var(--main); font-weight: 500; font-size: 1.2em; margin-right: 1px
}  


.accordio input[type="radio"]:checked+label::before  {
    content: "- ";
  
}    


.accordio > div input ~ div .darker {
  color: var(--black);
  line-height: 5vh;
  font-weight: 500;
}
.accordio > div input ~ div p {
  padding: 0px;
  border-top: 0px solid #fff;
}
.accordio > div input:checked + label {
  /*transition: all  ease-in 0.7s;*/
  
}
.accordio > div input:checked ~ div {
  display: block;
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  transition: max-height ease-out 1.2s,  opacity  1s ; padding-bottom: 40px
}
.olist {
  margin: 0px;
  padding: 0px 0px 30px 20px ; font-weight: 250; font-size: 1.1em; line-height: 1.3em
}

/***** end Terms accordion**/

 select:focus {
  outline: none; 
}

/* 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.4em; font-weight: 450; margin: 0px 0px 0px}
.sectors h4 {color: var(--main); font-size: 1.3em; font-weight: 300; margin: 0px 0px 20px}
.sectors h5 {color: var(--dtext); font-size: 1.05em; font-weight: 300; margin: 0px 0px 20px; line-height: 1.2em; letter-spacing: 0px; white-space: normal}
.sectors h6 {color: var(--main); font-size: 1.15em; font-weight: 350; margin: 25px 0px 15px; line-height: 1.1em}
.sectors p {color: var(--text); font-size: 1.1em; font-weight: 250; 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: 1.1em; font-weight: 250; margin: 0px 0px 7px; line-height: 1.1em}
.sectors ul  {list-style-position: outside;  padding-left: 1em; margin: 0px}


/* end sectors */

.warning_enterprise {background: var(--slightbg); border: 1px solid var(--vlightbg); padding: 15px; text-align: center; margin: 30px 0px; font-size: 1.0em; line-height: 1.7em; color: var(--text); font-weight: 300 }
.warning_enterprise b {font-size: 1.2em; font-weight: 300; color: var(--main)}


/********************************************smaller screen settings */
@media screen and (max-width: 1300px) {
.homedisplay { margin: 10px 10px 30px;  }


    
    
}






/********************************************smaller screen settings */
@media screen and (max-width: 1450px) {

    
    .homedisplay h1 { font-size: 3.4em}
    .homedisplay h5 { font-size: 1.6em}
    
    
}
/**********************************************************/








.grecaptcha-badge {z-index: 11;}