* {
	font-family: 'Hepta Slab', sans-serif;
	margin:0;
	padding:0;
}
/* ================================= */
/* basic formatting                  */
/* ================================= */

body { 
	background-color: #ffffff;
	font-size: 14px;
    margin: 0 auto; 
	color: #000000;
	line-height:150%;
}

a:link {
	color: #498392;
	font-weight: ;
	text-decoration: none;
}
a:visited {
	color: #498392;
	text-decoration: none;
}

a:hover {
	color: #498392;
	text-decoration: none;

}
a:active {
	color: #DF7540;
	text-decoration: none;
}
h1 {
	display: inline;
	font-size: 28px;
	font-weight:500;
	color: #414141;
}
h2 {
	display: inline;
	font-size: 24px;
	color: #414141;
	font-weight:500;
}
h3 {
	display: inline;
	color: #414141;
	font-size: 20px;
 	font-weight:500;

}
h4 {
	display: inline;
	color: #414141;
	font-size: 18px;
 	font-weight:500;
}

.nounderline {
	text-decoration:none;
}

.nocolor {
	color:#414141;
}

.bluehighlight {
	background-color: #B7D3DB;
}

img {
	max-width: 100%;
	height:auto;
}

html 
{
    min-height: 100%; 
}

textarea {
	max-width:95%;
}

table {
	border-collapse: collapse;
}

.tableFixHead {
    overflow-x: auto;
}
.tableFixHead thead th {
    position: sticky;
    top: 50px;
} 
td {
    text-align: left;
	margin: 0px auto;
	border: none;
}
th {
  position: sticky;
  top: 50px;  /*Don't forget 140 this, required for the stickiness */
}
/* indents 2nd line in a list */
li {
/*	list-style-type:disc; */
	list-style-position:inside;
	text-indent: -20px;
	margin-left: 20px;
}
ul {
   list-style:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
ul li {
/*	text-indent: 0px; */
	margin-left: 20px;
	height:auto;
}

.nostyle li{
    margin: 20px;
    padding: 0;
	text-indent: -20px;  
	list-style:none;
}

.txthanging {
/*	margin: 25px;
	padding: 0;  */
	text-indent: -25px;  
}

.ErrMsg {
	color: #DF7540;
	font-weight:600;
}

/* 5/20/26 - added for contact form validation errors */

.error-msg {
  display: block;
  color: #c0392b;
  font-size: 0.85em;
  margin-top: 3px;
}

/* 5/20/26 - added for contact form validation errors */

.field-error {
  border: 2px solid #c0392b;
  outline: none; /* prevents blue outline from competing with red border */
}

.navlist a{
    margin: 0;
    padding: 0;
}
.navlist li{
    margin: 0;
    padding: 0;
	text-indent: 5px;  
	list-style:circle;
}
.bulletlist a{
    margin: 0;
    padding: 0;
}
.bulletlist li{
    margin-left: 20px;
    padding: 0;
	text-indent: -0px;  
/*	text-indent: -20px;   12/17/25 */
	list-style:circle;
}
.numlist a{
    margin: 0;
    padding: 0;
}
.numlist li{
    margin-left: 20px;
    padding: 0;
	text-indent: -0px;  
	list-style:decimal;
}

.menulist a, li{
	list-style:none;
}

.menusimple a, li{
	list-style:none;
}

iconlist1px a{
    margin: 0;
    padding: 0;
}
.iconlist1px li{
    margin-left: 20px;
    padding: 0;
	text-indent: -10px;  /* use -10 for 1px */
	list-style:none;
}
iconlist2px a{
    margin: 0;
    padding: 0;
}
.iconlist2px li{
    margin-left: 20px;
    padding: 0;
	text-indent: -15px;  
	list-style:none;
}

.nowrap {
	white-space:nowrap; 
}

.sigfont {
	font-size: 46px;
	font-weight:600;
	font-family: "Tangerine";
}
.menutext {
	font-size:13px;
	color: #414141;
    text-decoration: none;
	margin-left: 16px;

}


.smalltext {
	font-size:12px;
}
.medtext {
	font-size:18px;
}
.bodytext {
	font-size:14px;
	color: #0C0C0C;
	font-weight:500;
}
.bigtext {
	font-size:36px;
	color: #C1C1C1;
}
.captiontext {
	font-size:36px;
}

.dollartext {
	font-size:30px;
	color: #FFF;
}
.dollartextorg {
	font-size:30px;
	color: #DF7540;
}

.dividertext {
	color: #DF7540;
	font-size:40px;
	font-weight:bold;
	text-align:center;
}

.h1white {
	color: #FFF;
}

.h1text {
	font-size:28px;
}

.h2text {
	font-size:24px;
}
.h3text {
	font-size:20px;
}

.nolinktext {
	color: #C1C1C1;
}

.tagtext {
	font-size:13px;
	color: #DF7540; 
	font-weight:600;
	display:inline-block;
	padding: 0px 0px 0px 5px;
}
.bignum {
	font-size:48px;
	font-weight:bold;
	display:inline-block;
	background-color: #E8EAEE;
	border: solid 1px #E1E1E1;
	padding: 10px 20px 10px 20px;
}
.orangenum {
	font-size:48px;
	font-weight:bold;
	display:inline-block;
	color: #DF7540;
	border: solid 1px #DF7540;
	padding: 10px 20px 10px 20px;
}
.whitenum {
	font-size:60px;
	font-weight:bold;
	display:inline-block;
	color: #FFF;
	padding: 20px 20px 10px 20px;
}
.knowwhite {
	color: #FFF;
}

.whiteopback {
	color: #414141;
	background-color:#FFF;
	padding: 10px 20px 10px 20px;
	border-radius: 5px;		
	opacity: 0.6;
}

.whitetext {
	color: #FFF;
	font-size: 20px;
}

.white-text {
	color: #FFF;
	font-size: 14px;
	font-weight:600;
}
.redorg {
	color: #DF7540;
}
.redtext{
	font-size: 14px;
	color: #DF7540;
 	font-weight:600;
}

.bluetext {
	color: #498392;
}
.graycell {
	background-color: #E8EAEE;
}

.aright {
	float:right;
	margin-right: 25px;
}
.amiddle {
	background-color:#FFF;
	position: absolute;
/*    top: 50%; */
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


.acenter {
    text-align: center;    
}
.aleft {
    text-align: left;    
}
.clrboth {
	clear:both;
}
.clright {
	clear:right;
}
.arightnomarg {
	float:right;
/*	margin-right: 25px; */
}

.abottom {
	position: absolute;
	bottom: 0;
}
.doubleline {
	line-height:150%;
}
.tripleline {
	line-height:200%;
}

.message {
	float: right;
	border: solid 1px #DF7540;
	border-radius: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 5%;
	white-space:nowrap;

}
.messageleft {
	float: left;
	border: solid 1px #DF7540;
	border-radius: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 5%;
	white-space:nowrap;

}

.bold {
	font-weight:600;
}
.boldlt {
	font-weight:500;
}

.defaultText {
	color: #959595;	
	font-style: italic;
}

.defaultTextActive {
	color: #959595;
}

/* anchor tags go to the bottom instead of the start of the tag */

.namedAnchor:before {
	display: block;
	content: " ";
	margin-top: -170px;
	height: 170px;
	visibility: hidden;
}

#topBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #FFF; /* Set a background color */
    color: #CCC; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#topBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/* ================================= */
/* page head                         */
/* ================================= */

.bluebghead {
	width: 100%;
	height: 450px;
	position: relative;
	background-color: #498392;
	padding-top: 10%;
	display: block;
	text-align:center;
	font-size:32px;
	line-height:150%;
	color: #FFF;
}

.margincenter {
	margin-left: 15%;
	margin-right: 25%;
}

/* ================================= */
/* menus                             */
/* ================================= */

/* position top of each page to allow for fixed header */
.bodywrap {
	margin:0;
	padding:0;
/*	margin-top: 80px;*/
	margin-top: 90px;  
/*	margin-top: 150px;*/
}

.navhead {
	width:100%;
	position: fixed;
	top: 0;
}
.headphone {
	float:right;
	color: #DF7540;
	font-size: 20px;
	padding-right: 20px;
}

/* active menu selection */
.menuActive  {
	display: block;
	border-bottom: #DF7540 solid 1px ;
/*	font-color: #DF7540; */
}

/* active sidenav selection */
.navActive  {
/*	border-left: #DF7540 solid 4px ;
	border-bottom: #FFF solid 1px ; */
	display: block;
	border-bottom: #DF7540 solid 1px ;
	
}

/* ========================== */
/* Responsive top nemu starts */
/* ========================== */


/* Add a black background color to the top navigation */
.logonav {
	background-color:#FFF;
/*    overflow: hidden;  */
	border-bottom: #DBDBCA solid 2px;
	position: fixed;
	top: 0;
    margin: 0;
    padding: 0;	
	width: 100%;
	height: 110px;  /* need this for wrapper around amiddle */
	z-index:1; /* always puts the menu on top for scrolling the page content */
}

.tagline {
	font-size:14px;
	height: auto;
	width: auto;
	float:left; 
	display:inline-block;
	font-weight:600;
}
.logohead a {
	display: inline !important;
	padding-left: 5px;
}

.topnav {
	background-color: #FFF; 
/*	overflow: hidden;  */ /*2/24/20 - from Sagaz - this hides the dropdown content so take it out */
/*	top: 0;   */
	position: fixed; 
/* 	top: 15px; */ /* leave room for logo above menu */
	top: 50px;
	width: 100%;
	height: auto;  
	padding-left: 0px;
	z-index:1;  /*always puts the menu on top for scrolling the page content */
}


 ul .topnav{
    background-color: #FFF; 
	position:relative;  
	list-style-type: none;
    margin: 0; 
    padding: 0;
    overflow: hidden; 
}

 ul li, .topnav{
	float: left;
	color: #414141;
}

 ul li a, .topnav{
	display: block;
	color: #414141;
	text-align: left;
	text-decoration: none;
	transition: 0.3s;
	font-size: 14px;
 }
 ul li ul, .topnav {
	display: block;
	position: relative;
}
 ul li a:hover, .topnav {
	color: #DF7540;
	text-decoration: none;
}

/* Style the links inside the navigation bar */
.topnav a {
    display: block;
    color: #414141;
	padding-right: 20px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    font-size: 20px;
}


li a, .dropbtn {
	text-indent: 0;
    display: inline-block;
	color: #4B596B;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
	clear: both;  /* adds br after each list item */
}
    
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 14px;    
  border: none;
  outline: none;
  color: #414141;
/*  padding: 14px 16px; */
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

li.dropdown {
    display: block;
	text-indent: 0px;
}

li a:hover, .dropdown:hover .dropbtn {
	color: #DF7540;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  padding: 20px 20px 10px 20px; 
  text-align: left;
  left: 0;
  right: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; 
}

.dropdown-content a,
.dropdown-content a:link, 
.dropdown-content a:active, 
.dropdown-content a:visited {
  font-size: 13px;    
  color: #414141;
  padding: 6px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Change the color of links on hover */
/*.topnav a:hover {
	border-bottom: #DF7540 solid 2px ;
} */
.dropdown-content:link {
    color: #858585;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
  color: #DF7540;
}


.dropdown:hover .dropdown-content {
  display: block;
}



/* ================================= */
/* forms                             */
/* ================================= */
label {
	color:#5E6D84;
	font-weight:500;
	height: 25px;
	width; auto;
	margin-top: 10px;
	margin-left: 0;
	text-align: left;
	margin-right:15px;
	white-space:nowrap;
	display: block;  /* puts label above input *//*    float:left; */
}
input {
	font-size: 14px;
	color:#414141;
    height: 25px;
    width: 300px;
    border: 1px solid #333;
/*    border: 1px solid #F1F1EC; */
	display: block;
    margin-top: 5px;
}
textarea {
	float: left;
	font-size: 14px;
	color:#414141;
	display: block;
    margin-top: 5px;
}

select {
	font-size: 14px;
	color:#414141;
    height: 25px;
    width: 250px;
    border: 1px solid #5E6D84;
	display: block;
    margin-top: 5px;
}

/* for longer input fields like datepicker */
.fldgroup {
	float: left;
	display: inline-block;
	clear:none;
}

.fldgroup label {
	float: left;
	display: inline-block;
	width: auto;
    margin-right:15px;
	white-space:nowrap;
	clear:none;
	
}
.fldgroup input {
	float: left;
	display: inline-block;
	width: 100px; 
	clear:none;
	
}
/* for column lists */
.collistgroup {
	float: left;
	display: inline-block;
	clear:none;
}

.collistgroup label {
	float: left;
	display: inline-block;
	width: auto;
    margin-right:15px;
	white-space:nowrap;
	clear:none;
	
}
.collistgroup input {
	float: left;
	display: inline-block;
	width: 300px; 
	clear:none;
	
}
/* for longer input fields like datepicker */
.listgroup {
	float: left;
	display: inline-block;
	clear:none;
}

.listgroup label {
	float: left;
	display: inline-block;
	width: auto;
    margin-right:15px;
	white-space:nowrap;
	clear:none;
	
}
.listgroupnum input {
	float: left;
	display: inline-block;
	width: 40px; 
	clear:none;
	
}

.listgroup input {
	float: left;
	display: inline-block;
	width: 750px;   
	clear:none;
	
}
/* when picklist is in a row like contractinfo payments */
.pickgrouprow {
	float: left;
	display: inline-block;
	clear:none; 
}

.pickgrouprow select {
	float: left;
	display: inline-block;
	width: 125px;
	clear:none; 
}
.pickgrouprow option {
	float: left;
	display: inline-block;
	width: 125px;
	clear:none; 
}

.pickgroup {
	float: left;
	display: inline-block;
	clear:both; 
}

.pickgroup select {
	float: left;
	display: inline-block;
	width: 250px;
	clear:both; 
}
.pickgroup option {
	float: left;
	display: inline-block;
	width: 250px;
	clear:both; 
}
/* radio buttons, checkboxes - keep label with input field */
.selectgroup {
	float: left;
	display: inline-block;
	clear:none;
}
.selectgroup label {
	float: left;
	display: inline-block;
	width: auto;
    margin-right:10px;
	white-space:nowrap;
	clear:none;
	
}
.selectgroup input {
	float: left;
	display: inline-block;
	width: 50px; 
	font-weight: 500;
	clear:none;

}

.checkgroup {
	float: left;
	display: inline-block;
	clear:none;
}
.checkgroup label {
	float: left;
	display: inline-block;
	width: auto;
    margin-right:10px; 
	white-space:nowrap;
	clear:none;
	
}
.checkgroup input {
	float: left;
	display: inline-block;
	width: 25px; 
	font-weight: 500;
	clear:none;

}
.checkgroup:hover {
}
.checkgroup input[type=checkbox]:hover {
	float: left;
	display: inline-block;
	width: 25px; 
    border: 1px solid #DF7540;
	font-weight: 500;
	clear:none;
}

.inputcond {
	display:inline-block;
	clear: both;
}
.inputcond input:hover {
	display:inline-block;
	border: #6C7E97 solid 2px;
	clear: both;
}

.inputcond input{
	background-color: #DCE0E6;
	border: #9c9c9c solid 1px;
	border-radius: 2px;
	display: inline-block;
	width: 100px;
}

.inputform {
	background-color: #E6E8EC;
	height: auto;
	width: 100%;
	margin-top: 10px;
	border-radius: 5px;
	padding-left: 20px;
	text-align:left;
}
/* prevents break before and after the link */
.inputform a:link {
	display:inline;
	clear: none;
}

.formgroup {
	float: left;
	display: inline-block;
	clear:both; 
}
.formgroup input {
	float: left;
	display: inline-block;
	width: 350px;
	clear:both; 
}

.formgroup select {
	float: left;
	display: inline-block;
	width: 400px;
	clear:both; 
}
.formgroup option {
	float: left;
	display: inline-block;
	width: 500px;
	clear:both; 
}

/* =========================== */
/* fixed section on page for nav links */
/* =========================== */

.wrapper {
    margin: 0 auto; 
    width: 100%;
}
.LeftMargin {
	margin-left:5%;
}
.RtMargin {
	margin-right:5%;
}

.SmLeftMargin {
	margin-left:2%;
}
.LeftMargin20 {
	margin-left:20%;
}

.noscroll {
	position: sticky; 
	top: 300px;
	
}
.stickyicons {
	position: sticky; 
	top: 200px;
}
.noscroll100 {
	position: sticky; 
	top: 150px;
}

.section-noscroll {
	float:right;
	width: 45%;
	position: fixed; 
	height: 100%; 
	top: 200px;
	z-index: -1;
	overflow: hidden;
}


.main {
    float: right;
    width: 70%;
    height: auto;
}

/* ================================= */
/* for calculators                   */
/* ================================= */

/* ================================= */
/* Creates multiple columns on a page */
/* Just change the right, lett and    */
/* middle so they total 100%          */
/* Wrap the columns in the applicable  */
/* column div, then add the div with   */
/* the specifics for the columns       */
/* ================================= */

.whiteboxsize {
	background-color:#FFF;
	border-radius:10px;
	margin-top:5%;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:5%;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 90%;
	min-height: 450px; 
	float:left;

}

 .whiteboxsize li{
	list-style:circle;
	float:left;
	clear:left;  /* handles br after each li */

}

.whiteboxsmall {
	background-color:#FFF;
	border-radius:10px;
	margin-top:5%;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:5%;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px; 
	width: 90%;
	min-height: 250px; 
	float:left;

}
.whiteboxsmall li{
	list-style:circle;
	float:left;
	clear:left;  /* handles br after each li */
}

.blueanswerbox {
	background-color:#E9EBEF;
	border-radius:2px;
	margin-left:3%;
	margin-right:5%;
	margin-bottom:5%;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px; 
	padding-bottom: 10px; 
	width: 90%;
	height: auto; 
	float:left;
	line-height: 200%;
}
.blueanswerbox li{
	list-style:circle;
	float:left;
	clear:left;  /* handles br after each li */
}


/* The sidebar menu */
.sidenav {
    height: auto; /* Full-height: remove this if you want "auto" height */
    top: 250px; /* Stay at the top */
    left: 0;
    background-color: #9FB5B5; /*  */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 0;
}

/* The navigation menu links */
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 14px;
    color: #414141;
    display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav a:active {
    color: #f1f1f1;
}

/* Style page content */
.sidenavmain {
	float: right;
	margin-left: 25px;
	height: auto;
    text-decoration: none;
}


.nav-right {
	float:right;
	margin-right: 30px;
	margin-top: 30px;
	padding-top: 5px;
}

.calcborder {
	clear: both;
	padding: 0px;
	margin: 0px;
	border: 1px solid #f1f1f1;
	background-color:#E9EBEF;
	padding: 15px 25px 15px 25px;
	border-radius:5px;
	height: auto;
	width: 90%;
	float:left;
}

/* ================================= */
/* page images and text              */
/* ================================= */

.mainpeople {
	width: 100%;
	height: 540px;
	position: relative;
	background-image: url(/images/content-marketing-tools.jpg);
	background-repeat:no-repeat;
	background-size:cover;
/*	z-index: -1;  2/25/20 - a link doesn't work since this is on top of it*/
}

.workwebwizely {
	width: 100%;
	height: 575px;
	position: relative;
	background-image: url(/images/managed-security-services.jpg);
	background-repeat:no-repeat;
	background-size:cover;
/*	z-index: -1;  2/25/20 - a link doesn't work since this is on top of it*/
}
.homewebwizely {
	width: 100%;
	height: 575px;
	position: relative;
	background-image: url(/images/young-smiling-family.jpg);
	background-repeat:no-repeat;
	background-size:cover;
/*	z-index: -1;  2/25/20 - a link doesn't work since this is on top of it*/
}
.techwhiteboard {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/tech-idea-whiteboard.jpg);
	background-repeat:no-repeat;
	background-color: #63B4C8;
}
.techtools {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/business-productivity-tools.jpg);
	background-repeat:no-repeat;
	background-color: #63B4C8;
}
.outsourcedit {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/outsourced-it-team.jpg);
	background-repeat:no-repeat;
	background-color: #DF7540;
}
.techeval {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/evaluate-technology.jpg);
	background-repeat:no-repeat;
	background-color: #63B4C8;
}
.techroles {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/IT-people.jpg);
	background-repeat:no-repeat;
	background-color: #498392;
}
.smallbizcoffee {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/small-business-it-services.jpg);
	background-repeat:no-repeat;
	background-color: #DF7540;
}
.friendlycoffee {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/friendly-coffee.jpg);
	background-repeat:no-repeat;
	background-color: #65768E;
}

.coffeecups {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/orange-blue-coffee-cups.jpg);
	background-repeat:no-repeat;
	background-color: #DF7540;
}
.orangelamp {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/orange-lamp.jpg);
	background-repeat:no-repeat;
	background-color: #DF7540;
}

.ciocoffee {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/cio-guide-cover.jpg);
	background-repeat:no-repeat;
	background-color: #65768E;
}

@media screen and (max-width: 480px) {
  .ciocoffee  {
 }
}
.questionary {
	width: 100%;
	height: 400px;
	position: relative;
	background-image: url(/images/questionary-header.jpg);
	background-repeat:no-repeat;
/*	background-color: #F3F3F1; */
	background-color: #E9EAED;
}

@media screen and (max-width: 480px) {
  .questionary  {
	padding-top: 20%;
  }
}
.orangemug {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/orange-coffee-mug.jpg);
	background-repeat:no-repeat;  
	background-color: #DF7540; 
}

@media screen and (max-width: 480px) {
  .orangemug  {
	padding-top: 20%;
  }
}

.discoverfivesteps {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/planning-business-framework.jpg);
	background-repeat:no-repeat;  
	background-color: #DF7540; 
}

@media screen and (max-width: 480px) {
  .discoverfivesteps  {
	padding-top: 20%;
  }
}
.steppingstones {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/technology-stepping-stones-2.jpg);
	background-repeat:no-repeat;  
	background-color: #DF7540; 
}

@media screen and (max-width: 480px) {
  .steppingstones  {
	padding-top: 20%;
  }
}

.fivesteps {
	width: 100%;
	height: 450px;
	background-color: #deccbd; 
}

@media screen and (max-width: 480px) {
  .fivesteps  {
	padding-top: 20%;
	background-color: #deccbd; 
    width: 25%;
	height:auto;
  }
}
.tanbg400 {
	width: 100%;
	height: 450px;
	background-color: #deccbd; 
}

@media screen and (max-width: 480px) {
  .tanbg400  {
	padding-top: 20%;
	background-color: #deccbd; 
    width: 25%;
	height:auto;
  }
}

.bloghead {
	width: 100%;
	height: 425px;
	position: relative;
	background-image: url(/images/it-people.jpg);
	background-repeat:no-repeat;  
	background-color: #498392; 
}
.tanbgcaption {
	padding-top: 20%;
	display: block;
	padding-left: 10px
	font-size:32px;
	line-height:150%;
	
}

@media screen and (max-width: 480px) {
  .tanbgcaption  {
    padding-top:  15%;
	overflow-wrap: break-word;
	word-wrap:break-word;  
	float:left;
	clear: both;  
  }
}

@media screen and (max-width: 480px) {
  .bloghead  {
	padding-top: 20%;
  }
}

.fivestepscaption {
	padding-top: 10%;
	display: block;
	margin-right:  5%;
	margin-left:  60%;
	text-align:left;
	font-size:32px;
	line-height:150%;
	color: #FFF;
	
}

@media screen and (max-width: 480px) {
  .fivestepscaption  {
    padding-top:  15%;
	overflow-wrap: break-word;
	float:left;
	clear: both;  
  }
}
.rightcaptionwhite {
	padding-top: 10%;
	display: block;
	color: #FFF; 
	margin-right:  5%;
	margin-left:  60%;
	text-align:left;
	font-size:32px;
	line-height:150%;

}

.rightcaption {
	padding-top: 10%;
	display: block;
	color: #498392; 
	margin-right:  5%;
	margin-left:  60%;
	text-align:left;
	font-size:32px;
	line-height:150%;
	
}

@media screen and (max-width: 480px) {
  .rightcaption  {
    padding-top:  15%;
	overflow-wrap: break-word;
	float:left;
	clear: both;  
  }
}

.centercaption {
	padding-top: 5%;
	display: block;
	text-align: center;
	color:#414141;
	font-size:32px;
/*	line-height:150%; */
	
}

.maincaption {
	padding-top: 5%;
	display: block;
	margin-left:  5%;
	color:#fff;
	font-size:32px;
/*	line-height:150%; */
}


.maincta {
	margin-left:  5%;
}
	
.mainwebcaption {
	padding-top: 5%;
	display: block;
	color: #498392; 
	margin-left:  75%;
	margin-right:  2%;
	text-align:left;
	font-size:32px;
	line-height:150%;
	
}


.centerwebcaption {
	padding-top: 5%;
	display: block;
	color: #498392; 
	margin-left:  23%;
	margin-right:  25%;
	text-align:left;
	font-size:32px;
	line-height:150%;
	
}

@media screen and (max-width: 480px) {
  .centerwebcaption  {
    padding-top:  15%;
	overflow-wrap: break-word;
	word-wrap:break-word;  
	float:left;
	clear: both;  
  }
}

.leftwebcaption {
	padding-top: 5%;
	display: block;
	color: #498392; 
	margin-left:  2%;
	margin-right:  70%;
	text-align:left;
	font-size:32px;
	line-height:150%;
	
}

@media screen and (max-width: 480px) {
  .leftwebcaption  {
    padding-top:  15%;
	overflow-wrap: break-word;
	word-wrap:break-word;  
	float:left;
	clear: both;  
  }
}

.mainwebcaptionop {
	padding-top: 5%;
	padding-bottom: 1%;
	display: block;
	background-color: #fff; 
	margin-left:  0%;
	margin-right:  0%;
	border-radius:5px;
	color:#666;
	text-align:center;
	font-size:32px;
	opacity: 0.6;
}

@media screen and (max-width: 480px) {
  .mainwebcaptionop  {
    padding-top:  15%;
	overflow-wrap: break-word;
	word-wrap:break-word;  
	float:left;
	clear: both;  
  }
}

.maincaptionsub {
	display: block;
	margin-left:  15%;  
	width: 60%;
	color: #4B596B;
	line-height:200%;
} 

.whitecircles {
	width: 100%;
	height: 300px;
	position: relative;
	background-image: url(/images/white-circles-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

@media screen and (max-width: 480px) {
  .whitecircles  {
    width: 100%;
  }
}

.whitecirclesmini {
	width: 100%;
	height: 150px;
	position: relative;
	background-image: url(/images/white-circles-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

@media screen and (max-width: 480px) {
  .whitecirclesmini  {
    width: 100%;
  }
}

.bluecircles {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/financial-abacus.jpg);
	background-repeat:no-repeat;
	background-color: #498392; 
}

@media screen and (max-width: 480px) {
  .bluecircles  {
    width: 100%;
  }
}
.bluecirclesmini {
	width: 100%;
	height: 150px;
	position: relative;
	background-image: url(/images/white-circles-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

@media screen and (max-width: 480px) {
  .bluecirclesmini  {
    width: 100%;
  }
}


.teammeeting {
	width: 100%;
	height: 400px;
	position: relative;
	background-image: url(/images/team-meeting.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}

@media screen and (max-width: 480px) {
  .teammeeting  {
    width: 100%;
  }
}

.book-sharing {
	width: 100%;
	height: 450px;
	position: relative;
	background-image: url(/images/book-room.jpg);
	background-repeat:no-repeat;
	background-color: #63B4C8;
}
.padcaption {
	margin-left: 10%;
}

.technology-team {
	width: 100%;
	height: 500px;
	position: relative;
	background-image: url(/images/technology-strategy-meeting.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
.technology-team-caption {
	padding-top:  20%;
	display: block;
	font-family: 'Hepta Slab', sans-serif;
	color:#666;
	font-size:32px;
	text-align:left;
	line-height:150%;
}

.simpleborder {
	clear: both;
	padding: 0px;
	margin: 0px;
	background-color:#E6E8EC;
	padding: 15px 15px 15px 50px; 
	border-radius:25px;
	height: auto;
	width: 75%; 
	float:left;
}

.imglink a:hover 
{
  border-bottom: 0;
}

.img {
	vertical-align: text-top;
}
.imgsize {
	max-width: 75%;
/*	height:auto; */
}
.imgsizesm {
	max-width: 50%;
}
.imgsizesm80 {
	max-width: 80%;
}
.imgsizethird {
	max-width: 33%;
}
.imgsizexsm {
	max-width: 100px;
}
.imgsizesm10p {
	max-width: 110%;
	max-height: 110%;
}

.imgauto {
	width: 100%;
	height:auto;
}
.imgcircle {
	max-height:100px;
	max-width:100px;
	border-radius: 50%;
}
.imground {
	border-radius: 50%;
}
.imgborder {
	border-radius: 25px;
}

.imgbackground {
	width: 100%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}
.imgbackgroundsm {
	width: 50%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}
.imgbackground75 {
	width: 75%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}
.imgbackground100 {
	width: 100%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}
.imgbackground125 {
	width: 125%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}

.imgbackgroundxsm {
	width: 20%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius: 25px;
}

.roundborder {
	width: 120px;
	height: 120px;
	background-color: #f4f4f4; 
	border: 3px dotted #D4D4D4; 
	border-radius: 50%;
}

.roundborder p{
	text-align:center;
	margin-top: 30%;

}
.imgbackgroundsq {
	width: 80%;
	height: auto;
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
}

.dropcontainer {
	width: 160px;
	height: 160px;
	background-color: #f4f4f4; 
	border: 3px dotted #D4D4D4; 
	border-radius: 50%;
}

.cardcontainer {
	width: 125px;
	height: 175px;
	background-color: #f4f4f4; 
	border: 3px dotted #D4D4D4; 
	border-radius: 5%;
}
.cardborder {
	border: 10px solid #fff;
	height: 195px;
	width: 145px;
	float:left;
	display:inline-block;
	border-radius:5%;
/*	padding-top: 30px; */
}

.bgGray {
	background-color: #E8EAEE;
}
.bgBlueTrans {
/*	background-color:#498392;  */
    background-color: rgb(73 131 146 / 10%);
}
	
.btmBorderGray {
	border-bottom-color: #D4D4D4;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.btmBorderWhite {
	border-bottom-color: #FFF;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

/* =================== */
/* knowledge main page */
/* =================== */
.knowBoxBorder {
	border: 10px solid #fff;
	height: auto;
	width: 325px;
	float:left;
	display:inline-block;
	border-radius:25px;
	padding-top: 30px;
}

.knowBox {
	border: #DBDBCA solid 2px;
	border-radius:10px;  
	padding: 5px 10px 5px 10px; 
	width: 300px;
	height: 250px;
	float:left;
	display:inline-block;
	background-repeat:no-repeat;
	background-size:cover;
/*	opacity: 0.8; */
}

.knowBox:hover {
	border: #718F90 solid 2px;
}

.knowBox:active {
	border: #718F90 solid 2px;
}

/* =================== */
/* book share          */
/* blog - 11/17/21     */
/* =================== */

.knowbox-border {
	border: 4px solid #fff;
	height: 390px;
	width: 360px;
/*	height: 320px;
	width: 295px; */
	float:left;
	display:inline-block;
	border-radius:5px;
	padding-top: 10px; 
}

.knowbox-book {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 20px;
	background-color:#FFF; 
	height:365px;
	width: 315px;
/*	height: 295px;
	width: 250px; */
	float:left;
	display:inline-block;
	border-radius:5px;
}

.knowbox-book:hover {
	border: 2px solid #DF7540; 

}
/* =================== */
/* resources links                */
/* 8/23/22     */
/* =================== */

.resource-border {
	border: 4px solid #fff;
	height: 290px;
	width: 290px;
	float:left;
	display:inline-block;
	border-radius:5px;
	padding-top: 10px; 
}

.resource-box {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 10px;
	background-color:#fff; 
	height: 250px;
	width: 250px;
	float:left;
	display:inline-block;
	border-radius:5px;
}

.resource-box:hover {
	background-color:#DCE0E6; 
}

/* =================== */
/* Learning Circles                */
/* 3/11/26     */
/* =================== */

.circle-border {
	border: 4px solid #fff;
	height: 540px;
	width: 500px;
	float:left;
	display:inline-block;
	border-radius:5px;
	padding-top: 10px; 
}

.circle-box {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 10px;
	background-color:#fff; 
	height: 525px;
	width: 455px;
	float:left;
	display:inline-block;
	border-radius:5px;

}

.circle-box:hover {
/*	background-color:#498392;  */
    background-color: rgb(73 131 146 / 10%);
}
/* =================== */
/* blog                */
/* blog - 4/7/22     */
/* =================== */

.blog-border {
	border: 4px solid #fff;
	height: 390px;
	width: 360px;
	float:left;
	display:inline-block;
	border-radius:5px;
	padding-top: 10px; 
}

.blog-box {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 10px;
	background-color:#fff; 
	height: 365px;
	width: 315px;
	float:left;
	display:inline-block;
	border-radius:5px;
}

.blog-box:hover {
	background-color:#DCE0E6; 
}
/* ===================                   */
/* blog side                             */
/* use instead of subscribefrm           */
/* blog - 6/14/22                        */
/* ===================                   */

.blog-side-box {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 10px;
	background-color:#fff; 
	height: auto;
	width: 90%;
	float:left;
	display:inline-block;
	border-radius:5px;
}

.blog-side-box:hover {
	background-color:#DCE0E6; 
}
/* =================== */
/* courses          */
/* =================== */

.course-border {
	border: 30px solid #fff;
	min-height: 300px;
/*	height: 360px; */
	width: 350px;
	float:left;
	display:inline-block;
	border-radius:25px;
	padding-top: 10px; 
}

.course-info {
	border: 2px solid #E1E4E8;
	padding: 10px 10px 10px 20px;
	background-color:#E8EAEE;
	min-height: 300px;
/*	min-height: 300px; */
/*	height: 335px; */
	width: 350px;
/*	width: 295px; */
	float:left;
	display:inline-block;
	border-radius:25px;
}

.course-info:hover {
	background-color:#fff; 
}

/* =================== */
/* academy          */
/* =================== */
.contactwrap {
	position: relative;
	background-color: #FFF;
	height:auto;
	width: auto;
}

.acadcontact {
	padding: 20px 20px 20px 20px;
	background-color: #EDEFF1;
	height: auto;
	width: auto;
	display:inline-block;
	border-radius:5px;
}

.acadbox-border {
	border-style: solid;
	border-color: #FFF;
	border-width: 10px 20px 30px 10px;
	height: auto;
	width: 300px;
	float:left;
	display:inline-block;
	border-radius:25px;
}

.acadbox-doc {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 20px;
	background-color:#fff;
	min-height: 325px; 
	width: 275px;
	float:left;
	display:inline-block;
	border-radius:25px;
}
.acadbox-doc:hover {
	background-color:#DCDFE4;
}
	
/*========================
  text boxes
  ======================== */
  

.textbox-auto {
	border: 1px solid #A9CBD3;
	padding: 10px 10px 10px 20px;
	font-size:14px;
	height: auto;
	width: 90%;
	float:left;
	display:inline-block;
	border-radius:25px;
	background-color: #fff;
    border-left: 4px solid #498392;
    margin-bottom: 1.0rem;
	box-shadow: 0 10px 30px rgba(31, 41, 51, 0.08);

}
.textbox-auto a,
.textbox-auto a:link,
.textbox-auto a:active,
.textbox-auto a:hover,
.textbox-auto a:visited {
	color: #718F90;
	text-decoration:underline;
}
.textbox-auto:hover a:link {
	font-weight:600;
}

.planbox {
	padding: 10px 10px 10px 30px;
	background-color:#498392;
	color: #fff;
	min-height: 445px;
	width: 80%; 
	float:left;
	display:inline-block;
	border-radius:25px;
}

.whitebox {
	width: 50px;
	background-color: #FFF;
}

.tocnav a, a:link, a:visited{
	text-decoration:none !important;
}
.tocnav a:hover
	{
	text-decoration: underline !important;;
}


.quesnav {
	background-color:#E9EAED; 
	width: 90%;
	padding-left: 10px;
	height: auto;
	float:left;
	display:inline-block;
	border-radius: 10px;
}
.quesnav a:active,
.quesnav a:hover
	{
	color: #DF7540;
	text-decoration:underline;
}
.quesnav:hover {
	border: 1px dotted #E0DFD9;  
} 

.technav {
	border: 3px dotted #df7540;
	width: 90%;
	padding-left: 10px;
	height: auto;
	float:left;
	display:inline-block;
	border-radius: 10px;
}
.technav a:active,
.technav a:hover
	{
	color: #DF7540;
	text-decoration:underline;
}

.blueborderdot {
	border: 2px dotted #498392;
	width: 90%;
	padding-left: 10px;
	height: auto;
	float:left;
	display:inline-block;
	border-radius: 10px;
}
.blueborderdot a:active,
.blueborderdot a:hover
	{
	color: #498392;
	text-decoration:underline;
}

/* ===================                   */
/* blog side                             */
/* use instead of subscribefrm           */
/* blog - 6/14/22                        */
/* ===================                   */

.subscribefrm {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 10px;
	background-color:#fff; 
	height: auto;
	width: 90%;
	float:left;
	display:inline-block;
	border-radius:5px;
}

.subscribefrm:hover {
	background-color:#DCE0E6; 
}


.orangedotbox {
	border: 1px dotted #DF7540;
	width: 95%;
	padding-left: 10px;
	height: auto;
	float:left;
	display:inline-block;
	border-radius: 10px;
}

.signupfrm {
	border: 1px dotted #DF7540;
	width: 90%;
	padding-left: 10px;
	height: auto;
	float:left;
	display:inline-block;
	border-radius: 10px;
}

.signupfrm input {
	width: 95%;
    border: 1px solid #DF7540;
	border-radius: 10px;
}

.signupfrm a:hover {
	padding: 10px 8px 2px 3px;
	border: #DF7540 dotted 1px;
}
.bluebox {
	background-color:#E8EAEE; 
	width: 100%;
	height: auto;
	float:left;
	display:inline-block;
}

.bluebox a,
.bluebox a:link,
.bluebox a:active,
.bluebox a:hover,
.bluebox a:visited {
	color: #dd580d;
	text-decoration:underline;
}

.bluebox li{
	list-style:circle;
	list-style-position:inside; /* added 3 line 4/3/23 */
	text-indent: -35px;
	margin-left: 30px; 
	float:left;
	clear:left;  /* handles br after each li */

}
.ltbluebox {
	background-color:#63B4C8;
/*	background-color:#E8EAEE; */
	color: #fff;
	width: 100%;
	height: auto;
	float:left;
	display:inline-block;
}

.ltbluebox a,
.ltbluebox a:link,
.ltbluebox a:active,
.ltbluebox a:hover,
.ltbluebox a:visited {
	color: #fff;
/*	color: #dd580d; */
	text-decoration:underline;
}

.ltbluebox li{
	list-style:circle;
	float:left;
	clear:left;  /* handles br after each li */
}
/* handles space before and after link */
.ltbluebox a:link{
	display:inline;
	clear: none;
}

.ltblueboxcta {
	background-color:#63B4C8;
	color: #fff;
	width: 100%;
	height: auto;
	float:left;
	display:inline-block;
    border: 1px solid #63B4C8;
	border-radius: 10px;
	/* top right bottom left */
	padding: 10px 25px 10px 25px;
}

.ltblueboxcta a,
.ltblueboxcta a:link,
.ltblueboxcta a:active,
.ltblueboxcta a:hover,
.ltblueboxcta a:visited {
	color: #fff;
/*	color: #dd580d; */
	text-decoration:underline;
}

.ltblueboxcta li{
	list-style:circle;
	float:left;
	clear:left;  /* handles br after each li */
}
/* handles space before and after link */
.ltblueboxcta a:link{
	display:inline;
	clear: none;
}

.whitebox {
	border: 1px solid #B6BDCE;
	padding: 10px 10px 10px 10px;
	background-color:#FFF;
	width: 90%;
	float:left;
	display:inline-block;
	border-radius:5px;
}


.dkbluebox {
	background-color:#498392;
	color: #FFF;
	width: 100%;
	height: auto;
	float:left;
	display:inline-block;
}

.dkbluebox a,
.dkbluebox a:link,
.dkbluebox a:active,
.dkbluebox a:hover,
.dkbluebox a:visited {
	color: #dd580d;
	text-decoration:underline;
}

.dkbluebox li{
	list-style:circle;
	float:left;
	clear:left;  /* handles br after each li */

}

.blueborder {
	clear: both;
	padding: 0px;
	margin: 0px;
	border: 1px solid #B6BDCE;
	padding: 10px 20px 10px 20px;
	border-radius:25px;
	height: auto;
	width: auto; 
	float:left;
}
.blueboxMargin {
	padding: 10px 10px 10px 10px;
	background-color:#E8EAEE;
	height: auto;
	width: 90%; 
	float:left;
	display:inline-block;
	line-height: 175%;
}

.blueboxMargin li {
	list-style: circle;	
	float:left;
	clear:left;  /* handles br after each li */

}

.bluebox-border {
	border: 1px solid #B6BDCE;
	padding: 10px 10px 10px 10px;
	width: 98%;
	float:left;
	display:inline-block;
	border-radius:5px;
}
.orangebox-border {
	border: 2px solid #E1E4E8; 
	padding: 10px 10px 10px 10px;
	width: 98%;
	float:left;
	display:inline-block;
	border-radius:5px;
}
.orangeboxMargin {
	padding: 10px 10px 10px 10px;
	background-color:#DF7540;
	height: auto;
	width: 100%; 
/*	float:right; */
	display:inline-block;
	line-height: 175%;
}
.ltblueboxMargin {
	padding: 10px 10px 10px 10px;
	background-color:#63B4C8;
	height: auto;
	width: 100%; 
/*	float:right; */
	display:inline-block;
	line-height: 175%;
}

.logobox {
	border: 3px solid #E8EAEE;
	padding: 10px 10px 10px 10px;
	background-color:#FFF;
	height: 100px;
	width: 200px;
	float:left;
	border-radius:5px;
}


/* ================================= */
/* icons                            */
/* ================================= */

.icon-red {
	color: #DF7540;
}
.icon-white {
	color: #FFF;
}

.icon-blue {
	color: #498392;
}

.icon-bluetrans {
  color: rgb(73 131 146 / 50%);
}

.icon-ltblue {
	color: #63B4C8;
}

.icon-gray {
	color: #d1d1d1;
}

.icon-blue-circle {
	padding: 12px 15px 12px 15px;
	background-color: #718F90;
	color: #fff;
	border-radius: 50%;
}
.icon-orange-circle {
	padding: 12px 18px 12px 18px;
	background-color: #DF7540;
	color: #fff;
	border-radius: 50%;
}

.icon-red-circle {
	padding: 12px 15px 12px 15px;
	background-color: #DF7540;
	color: #fff;
	border-radius: 50%;
}
.icon-red-cap {
	padding: 12px 11px 12px 11px;
	background-color: #DF7540;
	color: #fff;
	border-radius: 50%;
}
.icon-white-circle {
	padding: 6px 7px 6px 7px;
	background-color: #FFFFFF;
	color: #666;
	border-radius: 50%;
}
.icon-red-oval {
	padding: 12px 20px 12px 20px;
	background-color: #DF7540;
	color: #fff;
	border-radius: 50%;
}


/* ================================= */
/* buttons                           */
/* ================================= */
.btnclassblue {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 14px;
	display:inline-block;
	background-color: #498392; 
	color: #FFF;
	text-align: center;
	font-weight:500;
	border-radius:25px;
	border-color:#498392;
	border-width:2px;
	border-radius:25px;
	border-top-color: #498392;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #498392;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #498392;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #498392;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 10px 25px 5px 25px;
	width: auto;
	height: auto;
}
.btnclassblue a,
.btnclassblue a:active,
.btnclassblue a:link,
.btnclassblue a:visited
{
	color: #FFF;
	text-decoration: none;
}

.btnclassblue a:hover
{
	color: #FFF;
	background-color: #65768E;
	text-decoration: none;
}
.btnclassblue:hover
{
	color: #FFF;
	background-color: #65768E;
	text-decoration: none;
}

.btnclassbluerev {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 14px;
	display:inline-block;
	background-color: #FFF;
	color: #498392;
	text-align: center;
	font-weight:500;
	border-radius:25px;
	border-color:#498392;
	border-width:2px;
	border-radius:25px;
	border-top-color: #498392;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #498392;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #498392;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #498392;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 10px 25px 10px 25px;
	width: auto;
	height: auto;
}
.btnclassbluerev a,
.btnclassbluerev a:active,
.btnclassbluerev a:link,
.btnclassbluerev a:visited
{
	color: #498392;
	text-decoration: none;
}

.btnclassbluerev a:hover
{
	color: #FFF;
	background-color: #498392;
	text-decoration: none;
}
.btnclassbluerev:hover
{
	color: #FFF;
	background-color: #498392;
	text-decoration: none;
}

.btnclass {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 14px;
	display:inline-block;
	background-color: #DF7540; 
	color: #FFF;
	text-align: center;
	font-weight:500;
	border-radius:25px;
	border-color:#DF7540;
	border-width:2px;
	border-radius:25px;
	border-top-color: #DF7540;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #DF7540;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #DF7540;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #DF7540;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 10px 25px 10px 25px;
	width: auto;
	height: auto;
}
.btnclass a,
.btnclass a:active,
.btnclass a:link,
.btnclass a:visited
{
	color: #FFF;
	text-decoration: none;
}

.btnclass a:hover
{
	color: #DF7540;
	background-color: #FFF;
	text-decoration: none;
}
.btnclass:hover
{
	color: #DF7540;
	background-color: #FFF;
	text-decoration: none;
}

.btnclassrev {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 14px;
	display:inline-block;
	background-color: #FFF;
	color: #DF7540;
	text-align: center;
	font-weight:500;
	border-radius:25px;
	border-color:#DF7540;
	border-width:2px;
	border-radius:25px;
	border-top-color: #DF7540;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #DF7540;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #DF7540;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #DF7540;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 10px 25px 10px 25px;
	width: auto;
	height: auto;
}
.btnclassrev a,
.btnclassrev a:active,
.btnclassrev a:link,
.btnclassrev a:visited
{
	color: #DF7540;
	text-decoration: none;
}

.btnclassrev a:hover
{
	color: #FFF;
	background-color: #DF7540;
	text-decoration: none;
}
.btnclassrev:hover
{
	color: #FFF;
	background-color: #DF7540;
	text-decoration: none;
}

.btnclasssm {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 13px;
	display:inline-block;
	background-color: #DF7540; 
	color: #FFF;
	text-align: center;
	font-weight:500;
	border-color:#DF7540;
	border-width:2px;
	border-radius:5px;
	border-top-color: #DF7540;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #DF7540;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #DF7540;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #DF7540;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 5px 5px 5px 5px;
	width: auto;
	height: auto;
}
.btnclasssm a,
.btnclasssm a:active,
.btnclasssm a:link,
.btnclasssm a:visited
{
	color: #fff;
	text-decoration: none;
}

.btnclasssm a:hover
{
	color: #DF7540;
	background-color: #fff;
	text-decoration: none;
}
.btnclasssm:hover
{
	color: #DF7540;
	background-color: #fff;
	text-decoration: none;
}

.btnmenu a,
.btnmenu a:active
{
	font-family: 'Hepta Slab', sans-serif;
	font-size: 13px;
	background-color: #DF7540; 
	color: #FFF;
	text-align: center;
	font-weight:500;
	border-color:#DF7540;
	border-width:1px;
	border-radius:25px;
	border-top-color: #DF7540;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #DF7540;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #DF7540;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #DF7540;
	border-left-style: solid;
	border-left-width: 1px; 
}
.btnmenu:hover, a:hover
{
	font-weight:bold;
	background-color: #FFF;
	color: #DF7540;
} 

.btnclassxsm {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 12px;
	display:inline-block;
	background-color: #DF7540; 
	color: #FFF;
	text-align: center;
	font-weight:500;
	border-radius:2px;
	border-color:#DF7540;
	border-width:1px;
	border-top-color: #DF7540;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #DF7540;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #DF7540;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #DF7540;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 3px 5px 3px 5px;
	width: auto;
	height: auto;
}
.btnclassxsm a,
.btnclassxsm a:active,
.btnclassxsm a:link,
.btnclassxsm a:visited
{
	color: #fff;
	text-decoration: none;
}

.btnclassxsm a:hover
{
	color: #DF7540;
	background-color: #fff;
	text-decoration: none;
}
.btnclassxsm:hover
{
	color: #DF7540;
	background-color: #fff;
	text-decoration: none;
}

.btnclassrevsm {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 13px;
	display:inline-block;
	background-color: #FFF;
	color: #DF7540;
	text-align: center;
	font-weight:bold;
	border-radius:5px;
	border-color:#DF7540;
	border-width:1px;
	border-top-color: #DF7540;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #DF7540;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #DF7540;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #DF7540;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 5px 5px 5px 5px;
	width: auto;
	height: auto;
}
.btnclassrevsm a,
.btnclassrevsm a:active,
.btnclassrevsm a:link,
.btnclassrevsm a:visited
{
	color: #DF7540;
	text-decoration: none;
}

.btnclassrevsm a:hover
{
	color: #FFF;
	font-weight:500;
	background-color: #DF7540;
	text-decoration: none;
}
.btnclassrevsm:hover
{
	color: #FFF;
	font-weight:500;
	background-color: #DF7540;
	text-decoration: none;
}

.btndisable {
	font-family: 'Hepta Slab', sans-serif;
	font-size: 14px;
	display:inline-block;
	background-color: #e0e0e0; 
	color: #FFF;
	text-align: center;
	font-weight:500;
	border-radius:5px;
	border-color:#e0e0e0;
	border-width:2px;
	border-radius:5px;
	border-top-color: #e0e0e0;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #e0e0e0;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #e0e0e0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: #e0e0e0;
	border-left-style: solid;
	border-left-width: 1px;
	/* top right bottom left */
	padding: 10px 25px 10px 25px;
	width: auto;
	height: auto;
}

.colHead {
	background-color: #DF7540;
	text-align: left;
	color: #FFF;
	padding: 0px 0px 0px 0px;
}
.colHeadBlue {
	background-color: #498392;
	text-align: left;
	color: #FFF;
	padding: 0px 0px 0px 5px;
}

.footerMain {
	font-size: xx-small;
    text-align: left;
	text-decoration: none;
}
.footerMain a:link { 
	color: #5F4268; 
	border-bottom: 1px solid #5F4268; 
	text-decoration: none;  
	background-color: transparent;
}
.footerMain a:visited { 
	color: #5F4268; 
	border-bottom: 1px solid #5F4268; 
	text-decoration: none;  
	background-color: transparent; 
}

.footerMain a:hover { 
	color: #5F4268;
	text-decoration: none;
	border-bottom: 1px dashed #333; 
} 

.footerMain a:active { 
	color: #5F4268; 
	border-bottom: 1px solid #5F4268; 
	text-decoration: none;  
	background-color: transparent;
}

.sectHead {
	font-size: 14px;
	color: #414141;
 	font-weight:bold;
 	text-align: center;
}
.sectHead a,
.sectHead a:link, 
.sectHead a:active, 
.sectHead a:visited {
  color: #414141;
  text-decoration: none;
}

.footer {
	clear:both;
}
	
.grayBox {
	background-color:#DCE0E6;
}	
.whiteBox {
	background-color:#FFF;
}	

.RtVertBorder {
	border-right-width:1px;
	border-right-style:solid;
	border-right-color:#DCE0E6;
	padding-right: 5px;

}
.btmBorderMenu {
	height: 6px;
	background-image: linear-gradient(to bottom,rgba(235,235,230,1), rgba(238,238,232,.6),rgba(238,238,232,.3));
}

.tdFormat {
	border-bottom: #CECEB5 solid 1px;
	border-right: #DBDBCA solid 1px;
	vertical-align: top;
	padding-left: 5px;
}
.tdFormat a:link { 
	color: #498392; 
	text-decoration: none;  
	background-color: transparent;
}
.tdFormat a:visited { 
	color: #498392; 
	border-bottom: 1px solid #498392; 
	text-decoration: none;  
	background-color: transparent; 
}

.tdFormat a:hover { 
	color: #498392;
	text-decoration: none;
	border-bottom: 1px dashed #333; 
} 

.tdFormat a:active { 
	color: #498392; 
	border-bottom: 1px solid #498392; 
	text-decoration: none;  
	background-color: transparent;
}

.tdBullet {
    text-align: center; 
}
.tdBullet::after{
	font-size: 30px;
	color: #DF7540;
	content:"\2022";  
}

.BottomCellBorder {
	border-bottom: #DBDBCA solid 1px;
}

/* use for students */
.PadCell {
	padding-left: 20px;
}

.PadCell20 {
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}
.PadCell20R {
	padding-right: 20px;
}

.PadCellLR {
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.PadCell40 {
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 40px;
}

.PadCell60 {
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 60px;
}

.PadCell80 {
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 80px;
}
.PadCellRt {
	padding-right: 30px;
}
.RtMargin {
	margin-right: 5%;
}


ul {
list-style: none;
}

.reddivider {
  border-bottom: 1px dashed #DF7540; 
}

/* used for footer */
.footerBox {
	font-size:14px;
	width: 100%;
/*	background-color:#E8EAEE; */
    background-color: rgb(73 131 146 / 10%);
	text-decoration: none;
}	

.footerBox a,
.footerBox a:active,
.footerBox a:link,
.footerBox a:visited
{
	color: #414141;
	text-decoration: none;
}

.footerBox a:hover
{
	color: #DF7540;
}
.footerBox:link
{
	color: #414141;
	text-decoration: none;
}

/* used for girl scouts footer */
.genericfooterBox {
	width: 100%;
	background-color:#DCE0E6;
	text-decoration: none;
	font-size: 14px;
}	

.genericfooterBox a,
.genericfooterBox a:active,
.genericfooterBox a:link,
.genericfooterBox a:visited
{
	color: #DF7540;
	text-decoration: none;
}

.genericfooterBox a:hover
{
	color: #414141;
}
.genericfooterBox:link
{
	color: #DF7540;
	text-decoration: none;
}

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/* ================================= */
/* Creates multiple columns on a page */
/* Just change the right, lett and    */
/* middle so they total 100%          */
/* Wrap the columns in the applicable  */
/* column div, then add the div with   */
/* the specifics for the columns       */
/* ================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.column {
    float: left;
}
.column a:link {
	display: inline;
	clear: none:
}

/* Left and right column */
.column.side {
    width: 25%;
}

/* Middle column */
.column.middle {
    width: 75%;
}
.column.three {
    width: 33.3%;
}
.column.two {
	width: 50%;
}
.column.options {
	width: 41%;
}
.column.plan {
	width: 18%;
}
.column.template {
	width: 82%;
}
.column.sixty {
	width: 62%;
}
.column.forty {
	width: 38%;
}
.column.seventy {
    width: 70%;
}
.column.twenty {
    width: 20%;
}
.column.ten {
    width: 10%;
}


/* ================================= */
/* end of column grids               */
/* ================================= */


.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 1%; } /* all browsers except IE6 and lower */


.highlight {
	border: 2px dotted #DF7540;
	background-color: #DCE0E6;
}

/*----------------------------------------- */
/* rating stars                             */
/*----------------------------------------- */
.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don't support :checked don't 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn't make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:.6;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

/* ---- progress bar styling ----- */

progress {
	background: #65768E;  
	border = 0;
	height: 22px;
	border-radius: 9px;
}

/* for Chrome and Safari */

progress::-webkit-progress-bar {
	background: #65768E;  
	border = 0;
	height: 22px;
	border-radius: 9px;
}

progress::-webkit-progress-value {
	background: #DF7540;  
	border = 0;
	height: 22px;
	border-radius: 9px;
}

/* for Firefox */

progress::-moz-progress-bar {
	background: #65768E;  
	border = 0;
	height: 22px;
	border-radius: 9px;
}

.divider {
	font-size:24px;
	color: #DF7540;
	font-weight:bold;
}

.parent {
	position: relative;
}

.arrowdiv {
	position: absolute;
	top: 86%;
	left: 250px;
}
.arrowdiv2 {
	position: absolute;
	top: 86%;
	left: 300px;
}
.arrowdivmid {
	position: absolute;
	top: 30%;
	left: 500px;
}
/* ------------------------------- */
/* header backgrounds - March 2025 */
/* ------------------------------- */

/* index */
.bgblue {
  background-color: #498392;
  background-size: cover;
  width: 100%;
  height: 650px;
  overflow: hidden;
  position: relative;
  /*below show how it works*/
  &:after {
    content: "";
    width: 200%; /* width of the curve */
    height: 0;
    padding-top: 100%;  /* changes the curve height, sides */
    border-radius: 100%; 
    background: #fff;
    position: absolute;
    top: 95%; /* changes height */
/*    top: 60%; */
    left: 50%;
    transform: translateX(-50%);
  }
}

/* blog */
.bgpale {
  background-color: #498392;
/*  background-color: #BED1E0; */
  background-size: cover;
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  /*below show how it works*/
  &:after {
    content: "";
    width: 200%; /* width of the curve */
    height: 0;
    padding-top: 100%;  /* changes the curve height, sides */
    border-radius: 100%; 
    background: #fff;
    position: absolute;
    top: 95%; /* changes height */
/*    top: 60%; */
    left: 50%;
    transform: translateX(-50%);
  }
}


/*-----------------------*/
/* mobile                */
/*---------------------- */
@media screen and (max-width: 600px) {
  .bodywrap {
	top: 200px;
	  }
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
/*  .topnav a:not(:first-child) {display: none;} */
  .topnav a {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    top: 100px;
    float: none;
/*    float: left; */
    display: block;
    text-align: left; 
/*	height: auto;
	padding: 10px 10px 10px 0px; */
  }
}
@media screen and (max-width: 600px) {
  .menutext, .btnmenu, .logohead  {
	display:none;
	clear: both;
  }
}
@media screen and (max-width: 600px) {
  .maincaption  {
    padding-top:  5%;
	overflow-wrap: break-word;
	margin-left: 5%;
	float:left;
	clear: both;  
  }
}

@media screen and (max-width: 600px) {

	.maincta {
	overflow-wrap: break-word;
	margin-left:  5%;
	float:left;
	clear: both;  
	}
}

@media screen and (max-width: 600px) {
  .centercaption  {
    padding-top:  5%;
	font-size: 14px;
	overflow-wrap: break-word;
	margin-left: 3%;
	float:left;
	line-height: 175%;
	clear: both;  
  }
}
	

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle, .column.three, .column.two, .column.options, .column.plan, .column.template, column.sixty, column.forty, column.seventy, column.sixteen, column.ten {
    width: 100%;
  }
}
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-device-width: 600px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 600px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 14px;}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .section-noscroll {
    width: 100%;
	position: static;
	  }
}
@media screen and (max-width: 600px) {
  .mainwebcaption  {
    padding-top:  15%;
	overflow-wrap: break-word;
	word-wrap:break-word;  
	float:left;
	clear: both;  
  }
}


@media screen and (max-width: 600px) {
  .rightcaptionwhite  {
    padding-top:  15%;
	margin-left: 1%;
	overflow-wrap: break-word;
	float:left;
	font-size:24px;
	clear: both;  
  }
}


@media screen and (max-width: 600px) {
.bgblue {
  background-color: #498392;
  background-size: cover; 
  width: 100%;
  height: 650px;
  overflow: hidden;
  position: relative; 
  &:after {
    content: "";
    width: 200%; /* width of the curve */
    height: 0;
    padding-top: 100%;  /* changes the curve height, sides */
    border-radius: 100%; 
    background: #fff;
    position: absolute;
    top: 100%; /* changes height */
    left: 50%;
    transform: translateX(-50%);
  }
  }
}

@media screen and (max-width: 600px) {
.bgpale {
  background-color: #498392;
  background-size: cover; 
  width: 100%;
  height: 550px;
  overflow: hidden;
  position: relative; 
  &:after {
    content: "";
    width: 200%; /* width of the curve */
    height: 0;
    padding-top: 100%;  /* changes the curve height, sides */
    border-radius: 100%; 
    background: #fff;
    position: absolute;
    top: 60%; /* changes height */
    left: 50%;
    transform: translateX(-50%);
  }
  }
}