/* styles.css */

html {
	height:100%;
}
body {
  margin: 0;
  background: #f4f4f4;
  font-family: "Source Sans 3", sans-serif;
	background-image:url('../img/bg.png');
	max-height:100vh;
}

.page-container {
	max-width: 1400px;
	margin: 0 auto;
	background: white;
	min-height: 100vh;
	box-sizing: border-box;
	border-left:1px solid #dd9414;
	border-right:1px solid #451076;
	box-shadow: 3px 0px 8px #333;
}

header {
	display:flex;
	background-color:#451076;
	height:2rem;
	padding:0.1rem 1.8rem;
	color:#FFFFFF;
	display: flex;
	justify-content: space-between;
	font-weight:600;
	font-size:1.5rem;
}

header .header-right button {
	position: relative;
	display: inline-block;
	padding: 0 2rem 0 0;
	border:0;
	background-color:#451076;
	color:#FFF;
	font-family: "Source Sans 3", sans-serif;
	font-weight:600;
	font-size:1.5rem;
	cursor:pointer;
	line-height:1.4rem;
}

header .header-right button::after {
	content: ""; 
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 17px;
	height: 11px;
	background-image: url('../img/menu.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

h1 {
  margin: 0;
}

a {
	color:#451076;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.menu {
	width: calc( 100% - 3rem );
	max-width:1400px;
	transition: top 1s ease;
	display:block;
	height:0;
	background-color:#9c80b6;
	justify-content: space-around;
	display:none;
	padding:1rem 1.5rem 0.5rem 1.5rem;
}

/* visible state */
.menu.open {
	display:block;
	height:auto;
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 0 0 1.5rem 0;
	display:flex;
	gap:13%;
}

.menu li {
	padding: 1rem 1rem 1rem 2rem;
	border-left:1px solid #FFF;
	margin:0;
}

.menu a {
	color: white;
	text-decoration: none;
	font-size: 24px;
}

.menu a:hover {
	text-decoration: underline;
}

.menu .footer {
	color:#FFF;
	font-size:0.8rem;
}
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #FFF;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23%23%23'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
	float:right;
	filter: invert(1) grayscale(1) brightness(2);
}

.btn-close:hover {
    color: #FFF;
    text-decoration: none;
    opacity: .75;
	cursor:pointer;
}

.home-wrapper {
	width: calc ( 100%- 3rem );
	margin:1rem 0 3rem  1.8rem;
}

.page-wrapper {
	width: 70%;
	margin:1rem 0 3rem 1.8rem;
}

.greeting {
	color:#451076;
	font-size:4.0rem;
	font-weight:700;
}
.role {
	color:#451076;
	font-size:5.0rem;
	font-weight:600;
	line-height:4.8rem;
} 

@media screen and (max-width: 850px) {
  .page-wrapper {
	width: 100%;
	margin:1rem 0 3rem 1.8rem;
}

.greeting {
	color:#451076;
	font-size:2.0rem;
	font-weight:700;
}
.role {
	color:#451076;
	font-size:2.5rem;
	font-weight:600;
	line-height:4.8rem;
} 
}
/******************
homepage honeycombs
*******************/
.honeycomb-wrapper {
	display:flex;
	justify-content: flex-end;
	margin-top:2rem;
	margin-right:-1rem;
}

.honeycomb {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.row {
	display: flex;
	gap: 150px;
	margin-top: -100px;
}

.row:first-child {
	margin-top: 0;
}

.row.two { margin-left:-390px;}
.row.three { margin-left:390px;}

.hex, .hex-hollow {
	position:relative;
	width: 240px;
	height: 220px;
	background: #451076;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex {
	color:#FFF;
	text-align:center;
	align-items: center;  
	font-size:3.2rem;
	line-height:2.8rem;
	height: 220px;
}

.hex a{
	color:#FFF;
	font-size:2.0rem;
	text-decoration:none;
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hex a:hover {
	text-decoration:underline;
}

.hex-hollow {
	background: #dd9414;
}

.hex-hollow::before {
	content: "";
	position: absolute;
	margin:11px 12px;
	width: 90%; 
	height: 90%;
	background: white; 
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

@media screen and (max-width: 850px) {
  .honeycomb-wrapper {
      display:flex;
      justify-content: flex-end;
      margin-top:2rem;
      margin-right:0.2rem;
  }

  .honeycomb {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .row {
      display: flex;
      gap: 75px;
      margin-top: -50px;
  }

  .row:first-child {
      margin-top: 0;
  }

  .row.two { margin-left:-195px;}
  .row.three { margin-left:195px;}

  .hex, .hex-hollow {
      position:relative;
      width: 120px;
      height: 110px;
      background: #451076;
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }

  .hex {
      color:#FFF;
      text-align:center;
      align-items: center;  
      height: 110px;
  }

  .hex a{
      color:#FFF;
      font-size:1.2rem;
    line-height:1.1rem;
      text-decoration:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hex a:hover {
      text-decoration:underline;
  }

  .hex-hollow {
      background: #dd9414;
  }

  .hex-hollow::before {
      content: "";
      position: absolute;
      margin:5px 6px;
      width: 90%; 
      height: 90%;
      background: white; 
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
}
/********************
***CONTENT HELPERS***
*********************/

.divider {
    margin:2rem 0;
    border-bottom:1px solid #dee2e6;
  	width:100%;
}
.divider:after {
    clear: both;
}

.spacer {
	width:100%;
  	height:15px;
}
.spacer-50 {
	width:100%;
  	height:50px;
}

.newwindow {
  position: relative; 
  padding-right: 20px; 
    
}
.newwindow:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; 
  height: 12px; 
  background-repeat:no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='12' height='12'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E");
}

.clear {
	clear:both;
}

.align-buttons {
	width:100%;
	display:flex;
	justify-content:flex-end;
	margin-top:1.5rem;
}

/*****buttons******/
.primary  {
	color:#FFF;
	padding:6px 12px;
	border-radius:4px;
	border:1px solid #634984;
	background-color: #451076;
	font-weight:600;
	margin-left:0.5rem;
}
.secondary {
	color:#634984;
	padding:6px 12px;
	border-radius:4px;
	border:1px solid #634984;
	font-weight:600;
}
.primary:hover  {
	border:1px solid #2E1A47;
	background-color:#634984;
	background-image:none;
}
.secondary:hover, .secondary.hover {
	background-color:#e8e8e8;
	color:#2E1A47;
	border-color:#2E1A47;
}
.primary:active  {
	color:#FFF;
	background-color:#2E1A47;
	background-image:none;
}
.secondary:active  {
	color:#FFF;
	background-color:#2E1A47;
	background-image:none;
}
.primary.focus, .secondary.focus {
	outline-offset: 2px;
	outline: 2px solid black !important;
}


/***********************************
***DESIGN PATTERN GENERAL CLASSES***
************************************/

.left-col {
  	position:relative;
  	float:left;
  	width:48%;
}
.right-col {
  	position:relative;
  	float:right;
  	width:50%;
}

.space-above {
	display:block;
	margin-top:1rem;
}

/*********PASSWORD************/
.password-wrapper {
    position: relative;
}
.eye {
	content: '';
    position: absolute;
	width:16px;
	height:16px;
    right: 7px;
    top: 11px;
    cursor: pointer;
    color: #4A4A4A;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");

}

.eye.closed {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye-slash' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/%3E%3Cpath d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z'/%3E%3C/svg%3E");

}

.password-box {
  	padding: 0.8rem;
  	border: 1px solid #dee2e6;
  	margin-left:1.2rem !important;
  	height:auto;
}
.password-box h2  {
	margin:0.2rem 0 0 0;
}
.password-box h3 {
	margin:0 0 0.2rem 0;
	font-size:1.0rem;
	font-weight:700;
}
ul.password-ul {margin:0 0 10px 0; }
ul.password-ul li {line-height:24px; }    
li.check { list-style-image: url(../img/checkmark.png); }
li.cross { list-style-image: url(../img/x.png); }
.password-meter {
	position:relative;
	height:45px;
	width:auto;
	overflow:hidden;
    margin-bottom:1rem;
}
div.password-meter div.password-title {
	font-size:0.9rem;
	font-weight:bold;
	height:18px;
}
#block1 {
	border-radius: 4px 0px 0px 4px;
}
#block3 {
	border-radius: 0px 4px 4px 0px;
}
div.password-meter div.weak,
div.password-meter div.pass,
div.password-meter div.strong,
div.password-meter div.block {
	position: relative;
	float:left;
	width:31%;
	height:10px;
	background: linear-gradient( #e8e8e8, #FFFFFF, #e4e3e8, #d7d7d7);
	border:1px solid white;
}
div.password-meter div.weak {
	background: linear-gradient(#faf88d, #FFF, #f3f164, #faf88d);
}
div.password-meter div.pass {
	background: linear-gradient( #7bd192, #FFF, #a2f2b8, #7bd192);
}  
div.password-meter div.strong {
	background: linear-gradient( #128030, #FFF, #68d986, #128030);
}










/*****SECTION 1********/
.step {
	margin-right:4px;
	vertical-align: baseline;
	float:left;
	position:relative;
	vertical-align: text-bottom;
}
.mar-bot-20 {
	margin-bottom:20px;
}
/*****SECTION 2********/
.end-container {
	  display:none;
	  margin-bottom:20px;
}
/*****SECTION 3********/
#stars {
	width:100%;
	height:250px;
	background-color:#000;
	color:#FFF;
	position:relative;
}
.controls {
	position:relative;
	font-family:verdana;
	font-size:0.8rem;
  	float:right;
  	margin:0 0;
}
.texttop {
	vertical-align: text-bottom;
	margin-left:6px;
	margin-right:3px;
	display:inline-block;
}
/*****SECTION 4********/
.lighttext {
	color:#5E5E5E;
}
/*****SECTION 5********/
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.button-table {
	border-collapse: collapse;
}
.button-table th {
	background-color:#e6e6e6;
	border-bottom:1px solid #2E1A47;
}
.button-table td {
	padding:6px;
}
.button-table td.rHeader {
	text-align:right;
	font-weight:bold;
}
/**********SECTION 6*************/

/******form validation********/
label {
	  font-size:1em;
	  font-weight:bold;
	  display:inline;
	  margin-bottom:2px;
}
legend {
	display:inline;
  	width:auto;
}
fieldset {
	border:0;
    padding:0px;
}
.error-msg {
	font-size:0.9em;
	color:#AE0000;
	font-weight:bold;
	line-height:16px;
}
.error-msg:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    color:#AE0000;
    margin-right: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' width='20' height='20'%3E%3Cpath fill='%23AA0000' d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM231 231C240.4 221.6 255.6 221.6 264.9 231L319.9 286L374.9 231C384.3 221.6 399.5 221.6 408.8 231C418.1 240.4 418.2 255.6 408.8 264.9L353.8 319.9L408.8 374.9C418.2 384.3 418.2 399.5 408.8 408.8C399.4 418.1 384.2 418.2 374.9 408.8L319.9 353.8L264.9 408.8C255.5 418.2 240.3 418.2 231 408.8C221.7 399.4 221.6 384.2 231 374.9L286 319.9L231 264.9C221.6 255.5 221.6 240.3 231 231z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    top: 4px;
}
.success {
	font-size:0.9em;
	color:#03C04A;
	font-weight:bold;
	line-height:16px;
}
.hours-error {
	  clear:both;
}
.error-box {
    width:100%;
    height:auto;
    clear:both;
    margin-bottom:10px;
}
.success-msg {
    font-weight:bold;
    border:1px solid #099525;
    background-color:#dcf7e1;
    border-radius:8px;
    padding:8px 12px;
    margin-bottom:10px;	
    color:#099525;
    font-weight:bold;
}
.form-select {    
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color:#212529;
    background-color:  #fff;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid#dee2e6;;
    border-radius: 0.375rem;
    word-wrap: normal;
    height: 44px;
}	
.form-input {
    padding: .2rem .2rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color:  #fff;
    border: 1px solid #aaaaaa;
    border-radius: 0.375rem;
    transition: none;
    padding:2px;
    width:100%;
    flex-wrap:nowrap;
    height:38px;
}
.form-input.small {
  	width:30%;
}
.form-select.error,
.form-input.error {
  	border: 1px solid #AE0000;
}
.form-spacious {
  	padding: .2rem .2rem;
  	font-size: 1.2rem;
  	font-weight: 400;
  	line-height: 1.5;
  	color: #4A4A4A;
  	background-color:  #F2F2F2;
  	width:100%;    
  	transition: none;
  	border-radius:0px !important;    
  	box-shadow:none !important; 
  	border:0px;
  	border-bottom: 1px solid #a8a8a8;
}

.form-spacious:focus {
  	color: #696969;
  	border-left:0px !important;
  	border-right:0px !important;
  	border-top:0px !important;
  	border-bottom:2px solid #2E1A47;
  	box-shadow: 0px 0px 0px 0px transparent, 0px 0px 0px 0px transparent !important;
  	outline:none !important;
}
/*****WORK********/
.hide {
  	display:none;
}

.box {
  	padding: .6rem;
  	border: 1px solid #dee2e6;
  	border-radius: 0.375rem;
  	transition: none;
  	margin-bottom:10px !important;
  	height:200px;
  	width:90%;
  	overflow-y:scroll;
}
/***** TABLE *******/
.centre-table {
  	border-collapse: collapse;
  	padding:0px !important;
  	margin:0px !important;
  	width:100%;
}
.centre-table tr { line-height: 33px; }
.centre-table thead th {
  	padding:4px;
  	font-weight:600;
  	border-bottom:2px solid #634984 !important;
  	background-color:#dee2e6;
}
.centre-table td.center {
  	text-align:center;
}
.centre-table td {
  	padding:4px 6px;
  	font-size:1.0rem;
  	vertical-align: top;
}
.centre-table tr.top-line {
  	border-top:1px solid #e5e5e5;
}
tr:nth-of-type(even) {
  	background-color:#F8F8F8;
}
.plain tr:nth-of-type(odd) {
  	background-color:#FFF;
}
td, th {
  	font-size:16px;
}
td.seventy {
  	width:70%;
}
td.sixty {
  	width:60%;
}
th.forty {
  	width:40%;
}
th.thirty {
  	width:30%;
}
th.twentyfive {
  	width:25%;
}
th.twenty {
  	width:20%;
}
th.fifteen {
  	width:15%;
}
th.ten {
  	width:10%;
}
th {
  	vertical-align:top;
}
th.max50 {
  	width:50% !important;
}
.width20 {
  	width:20%;
}
.centre-table thead th.no_underline {
  	border-bottom:1px solid #ddd !important;
}
td select {
  	width:90px;
}	
.centercell {
  	text-align:center;
}	
.norecords {
  	text-align:center;
  	margin:20px;
  	padding:20px;
}
.centre-table caption {
	  display:none;
}
/*****RESPONSIVE DESIGN*****/
@media only screen and (min-width: 200px) and (max-width: 800px) {    
	.content-wrapper {
		margin:10px 5px 0px 5px;
	}
	/*home*/
	div.content-wrapper div.home {
		margin:2rem 0 0 0;
	}
	.photo {
		width:180px;
		height:240px;    
		margin:3px 16px 5px 3px;
	}
	.photo img {
	  width:180px;
	  height:240px;
	}
	/*contact*/
	div.content-wrapper div.form {
			margin:0 10%;
	}    
}
@media only screen and (max-width: 990px) { 
	  .table-wrap{
		  overflow:auto !important;
		  flex:none;
	  }
}
@media only screen and (min-width: 801px) and (max-width: 1200px) {  
	.content-wrapper {
		margin:20px 80px 0px 80px;
	}
	/*home*/
	div.content-wrapper div.home {
		margin:0 0;
	}
	.photo {
		width:240px;
		height:320px;    
		margin:3px 16px 5px 3px;
	}
	.photo img {
	  width:240px;
	  height:320px;
	}
	/*contact*/
	div.content-wrapper div.form {
			margin:0 30%;
	}  
	
  }
.feature-wrapper {
    display:flex;
    flex-direction: row;
    column-gap:10px;
}
.feature {
    border:1px solid  #dee2e6;
    border-radius:4px;
    background-repeat:no;
    flex-grow:1;
  	padding:10px;
}
.feature:hover {
    text-decoration:underline;
    cursor: pointer;
}
.image {
  width:100%;
  height:200px;
  border:1px solid  #dee2e6;
  border-radius:4px;
}
.image.one {
	background-image:url('../img/blossom.jpg');
   	background-size: 400%; 
}
.image.two {
	background-image:url('../img/emergency.jpg');
  	background-size: 200%; 
}
.image.three {
	background-image:url('../img/path.jpg');
  	background-size: 500%; 
}
.title {
    color:#165788;
    font-size:1.4rem;
    padding:5px 0;
    text-decoration:none;
  	font-weight:600;
}
.copy {
    font-size:1.0rem;
    color:#333;
}