:root{
  font-size:16px;
  font-family: Calibri, Adagio Sans, Arial, Helvetica, sans-serif;
  
}

/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));   */

body
{ 
  margin: 0 !important;
  padding: 0 !important;
  background: white;
  -webkit-user-select: none; /* prevents copy to hold on mobile */
}

liwas {
  padding-bottom:3px;
}

.list{
	margin-top:5px;
	margin-bottom:20px;
	margin-left:calc(2px + (10 - 2) * ((100vw - 300px) / (1600 - 300))); // 10px;
}

.lihead {
	font-weight:bold;
	list-style-type:none;
}
.liindent{
	margin-left:0px; //20px;
}

/**********************************************************
                       Header 
***********************************************************/

#header{
  background-color: #010A41;
  display:flex;
  align-items: center;
  padding-top:5px;
  padding-bottom:5px;
  margin-bottom:5px;
  top: 0; /* keeps div on top of page while scrolling */
  position: fixed;  /* keeps div on top of page whil scrolling */
  width:100%;
}
#logo{
  width: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));  
  margin-left:10px;
}
.filler{
  flex:1;
}
#title{ 
  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300))); 
  font-weight:bold;
  color:rgb(228, 222, 214);
  padding-left:8px;
}
#loginlink{
  padding-right:20px;
  font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));  
  cursor:pointer;
  color:white;
}
#loginlink:hover{
  text-decoration:underline;
}

#registerlink{
  padding-right:20px;
  font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));  
  cursor:pointer;
  color:white;
}
#registerlink:hover{
  text-decoration:underline;
}

.link{
	text-decoration:none;
}

/******************************************************
                    LOGIN AREA
*******************************************************/
#loginForm{
  display: block; /* init flex so IS shown when first loading page, will become none by JS */
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  margin-bottom:20px;
  margin-top:60px; /* needed to cover the height of the header that always stays on top */
}
#forgetForm, #forgetReplyForm, #requestDemoForm, #replyForm{
  display: none;
  margin-bottom:20px;
  margin-top:60px; /* needed to cover the height of the header that always stays on top */
}


.formdiv{
  background: #022b78;
  padding:10px 0px 4px 5px;
  width:220px;
  display:flex; 
  flex-direction:column;
}

.formcontainer {
  display: flex; /* init none, will become flex */
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  background-image: url('../images/coverNewWide.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height:150px;
}



#email, #password, #emailforget, #emaildemo {
  font-size:0.9rem;
  width:200px;
}
.instructions{
  font-size:0.85em;
  text-align: center;
  margin-bottom: 8px;
  color:#dddddd;
}

.formtitle{
  font-weight: 700;
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));  
  padding-left:7px;
  margin-bottom:2px;
  text-align:center;
  letter-spacing:0.05em;
  color:#dddddd;
}
.formrowdiv{
  display:flex;
  margin-bottom:8px;
  align-items: center;
}
.label{
  width:55px;
  text-align:left;
  padding-left:7px;
  padding-right:5px;
}
#forgetbutton{
  font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300))); 
  color:#bbbbbb;
  margin-left:30px;
  cursor: pointer;
}
#forgetbutton:hover{
  text-decoration: underline;
}
#cancelbutton, #canceldemobutton{
  font-size:0.9em;
  color:#bbbbbb;
  text-decoration: underline;
  margin-left:70px;
  cursor: pointer;
}
#demodiv{
	display:flex;
}
#linkShowDemoForm1 {
  font-size:0.95em;
  color:#dddddd;
  cursor: pointer;
  margin-top:15px;
  margin-bottom:10px;
  width:110px;
}
#linkShowDemoForm1:hover{
  text-decoration: underline;
}
#linkShowDemoForm2{
  font-size:0.95em;
  color:#dddddd;
  cursor: pointer;
  margin-top:15px;
  margin-bottom:10px;
  width:110px;
  margin-left: auto;
  text-align:right;
}
#linkShowDemoForm2:hover{
  text-decoration: underline;
}

#loginmessage{
  font-size:0.9em;
  color:#b35252;
  margin-right:7px;
}
#messageforgetemail{
  font-size:0.9em;
  color:#cccccc;
  text-align: justify;
  text-justify: inter-word;
  margin-right:7px;
}
#demotype{
	width:200px;
}
.inputfield{
	width:200px;
}
.inputfield:focus {
  background-color: #d4f584;
}
.tafield{
	width:200px;;
	height:70px;
}
#demomessage, #forgetmessage{
	font-size:0.9em;
	color:#b35252;
	width:200px;
	margin-bottom:10px;
}


/******************************************************
                        Section
*******************************************************/

#sectioncontainer{ /* dont add padding else phone view will have white around header */
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  width:100%;
  margin-top:20px;
}

.section{
  background: white;
  margin-top: calc(0px + (20 - 0) * ((100vw - 300px) / (1600 - 300)));
  margin-bottom:7px;
  border-top: 4px solid rgb(208, 214, 252);
  flex: 1;
  max-width:700px;
  width:92vw; /* push width to max-width or view-port */
}
.last { margin-right: 0 !important; }

.shadow1side {
  -webkit-box-shadow: 0 8px 6px -6px rgb(17, 17, 17);
	   -moz-box-shadow: 0 8px 6px -6px rgb(17, 17, 17);
	        box-shadow: 0 8px 6px -6px rgb(17, 17, 17);
}

.conTitle{
  font-size:1.25rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
  color:rgb(55, 91, 248);
  margin-top: 5px;
  
}

.conSubTitle{
  color:rgb(30, 60, 197);
  font-size:1.0rem;
  font-weight: bold;
  letter-spacing: 0.03rem;
  padding-top:8px;
  
}

.conText{
  padding:5px 0px 7px 0px;
  text-align:justify; 
  flex-wrap: wrap;
  
}
.checks{
  font-size:0.8rem;
  color:rgb(6, 145, 6);
}
.stars{
  font-size:0.9rem;
  color:rgb(226, 15, 15);
}
.image{
  width:90%;
  max-width:350px;
}
.imagewide{
  width:95%;
  max-width:650px;
  margin-bottom: 15px;
  border: 3px solid rgb(235, 235, 235);
}
.more{
  font-size:1.2rem;
  color:rgb(7, 122, 189);
  font-weight:700;
  padding-left:0px;
  letter-spacing: 0.05rem;
  padding-bottom:4px;
  cursor:pointer;
  margin-top:auto;
  text-decoration: underline;
}
.more:hover{
  color:rgb(12, 194, 240);
}

#books{
  display:flex;
  flex-wrap: no-wrap;
  max-width:100%;
  text-align:center;
  align-items:center;
  justify-content:center;
  margin-top:20px;
}

.book{
  max-width:100px;
  width:13%;
  margin-right:3px;
}
.cost{
  color:green;
  font-weight:bold;
}
#showExcerpts{
  text-decoration: underline;
  color:blue;
  cursor:pointer;
  width:150px;
  margin-left:20px;
  margin-top:15px;
  margin-bottom: 5px;
  font-size:0.9rem;
}
#textexcerpts{
  display:none;
  text-align:center;
  margin-top:20px;
}
.minitext{
	font-size:0.9em;
	margin-bottom: 15px;
	margin-left:20px;
}

.melimage{
	width: calc(280px + (520 - 280) * ((100vw - 300px) / (1600 - 300)));
	border: 5px solid rgb(249, 249, 249);
	padding: calc(0px + (16 - 0) * ((100vw - 300px) / (1600 - 300)));
	margin-bottom:5px;
	margin-left: calc(0px + (20 - 0) * ((100vw - 300px) / (1600 - 300)));
}

.rnimage {
	width: calc(280px + (350 - 280) * ((100vw - 300px) / (1600 - 300)));
	border: 5px solid rgb(249, 249, 249);
	padding: calc(0px + (16 - 0) * ((100vw - 300px) / (1600 - 300)));
	margin-bottom:5px;
	margin-left:calc(0px + (20 - 0) * ((100vw - 300px) / (1600 - 300)));
}

.keysigimage{
	width: calc(280px + (350 - 280) * ((100vw - 300px) / (1600 - 300)));
	border: 5px solid rgb(249, 249, 249);
	padding: calc(0px + (16 - 0) * ((100vw - 300px) / (1600 - 300)));
	margin-bottom:5px;
	margin-left:calc(0px + (20 - 0) * ((100vw - 300px) / (1600 - 300)));
}

.footernotes {
	font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
	margin-bottom:30px;
	margin-left:35px;
	font-weight:bold;
}

/*******************************
Login Button
*****************************/
#loginbutton, #submitforgetemailbutton, #submitdemobutton {
	background: linear-gradient(180deg, rgba(27,124,255,1) 0%, rgba(0,73,139,1) 100%);
	padding:3px 11px 3px 11px;
	font-weight:bold;
	font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300))); 
	letter-spacing:0.1rem;
	color:white;
	margin-left:10px;
	cursor:pointer;
}

#requestdemobutton {
	background: linear-gradient(180deg, rgba(27,124,255,1) 0%, rgba(0,73,139,1) 100%);
	padding:3px 11px 3px 11px;
	font-weight:bold;
	font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300))); 
	letter-spacing:0.1rem;
	color:white;
	margin-left:10px;
	cursor:pointer;
	width: calc(110px + (140 - 110) * ((100vw - 300px) / (1600 - 300))); 
	margin-bottom:15px;
	text-align:center;
}



/**********************************************************
Media Queries to adjust layout based on view port width
***********************************************************/

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:1200px) {

#sectioncontainer{
  flex-directionwas:column;
  
  .melimagewas{
	width:500px;
  }
}

}