* {box-sizing: border-box;margin: 0px;padding: 0px;}
body {
  margin: 0;
  padding: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
		--bacwhite: #fff;
		--bacblack: #000;
		--bacbue: #051D5B;
		--bacgrey: #C5C6C8;
		--bacred: #B3081B;
    font-family: "Avenir Next", "Avenir", sans-serif;

  }
  
.logo{width:150px;

}
 /* TOP SECTION */
.topsection{display:flex; justify-content:space-between; padding:20px; background-color:var(--bacbue);}
.topleft{align-content: center;}
.topright{display: flex; justify-content: flex-end; align-items: center; color: var(--bacgrey);}
.topright h3,h2,h1{padding-right:10px;}

 /* MENU SECTION */
a,div {text-decoration: none; color: bacwhite; transition: color 0.3s ease;}
a:hover {color: var(--bacred);}
#menuToggle {display: none; position: absolute; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none;}
#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
/*hamburger*/
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;}
/*Transform all the slices of hamburger into a crossmark.*/
#menuToggle input:checked ~ span {opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: var(--bacgrey);}
/* But let's hide the middle one.*/
#menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
/* the last one should go the other direction*/
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px);}

/* Make this absolute positioned at the top left of the screen*/
#menu {
	position: absolute;
	width: 300px;
	margin: -100px 0 0 -50px;
	padding: 50px;
	padding-top: 125px;
	color:#fff;
	background: #051D5B;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
	/*height: 100vh;*/
}
#menu a{color:#fff;}
#menu a:hover {color:var(--bacred);}
#menu li {padding: 10px 0;font-size: 22px;}
/* And let's slide it in from the left*/
#menuToggle input:checked ~ ul {transform: none;}

.onclick-menu:focus {pointer-events: none;}
.onclick-menu:focus .onclick-menu-content {opacity: 1;visibility: visible;display: inherit;pointer-events: auto;}
.onclick-menu-content {display: none;opacity: 0;visibility: hidden;transition: visibility 0.5s;}
.onclick-menu-content li{list-style: none;}		
/* end of menu */

/*	ADDED A NEW MENU STYLE TO TEST SUBMENUS	*/
#menufull { /**/background: #0B145E; color: #BCBDC0; height: 35px; /* border-bottom: 4px solid #eeeded */}
#menufull ul,#menufull li { margin: 0 0; padding: 0 0; list-style: none}
#menufull ul {height: 35px}
#menufull li {float: left;display: inline;  position: relative;  font: bold 12px Arial;  text-shadow: 0 -1px 0 #000;  border-right: 1px solid #444;  border-left: 1px solid #111;  text-transform: uppercase}
#menufull li:first-child {  border-left: none}
#menufull a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #eee;}
#menufull li:hover > a,#menufull li a:hover { background: #B50E1A}
#menufull input {display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menufull label {font: bold 30px Arial;display: none;  width: 35px; height: 36px; line-height: 36px; text-align: center}
#menufull label span {font-size: 12px; position: absolute; left: 35px}
#menufull ul.menus {height: auto; width: 180px; background: #0B145E; position: absolute; z-index: 99; display: none; border: 0;}
#menufull ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menufull li:hover ul.menus {display: block}
#menufull a.home {background: #0B145E;}
#menufull a.prett {padding: 0 27px 0 14px}
#menufull a.prett::after { content: ""; width: 0; height: 0; border-width: 6px 5px; border-style: solid; border-color: #eee transparent transparent transparent; position: absolute; top: 15px; right: 9px}
#menufull ul.menus a:hover { background: #B50E1A;}
#menufull ul.menus .submenu {display: none; position: absolute; left: 180px; background: #0B145E; top: 0; width: 180px;}
#menufull ul.menus .submenu li { background: #0B145E;}
#menufull ul.menus .has-submenu:hover .submenu {display: block;}
.menufull .icon {display: none;}

.heading {text-align: right; padding: 8px; background-color: var(--bacbue); color: var(--bacwhite);}

/* BUTTONS */
.button {background-color: #0B145E; /* Green */ border: none; color: white; padding: 10px 10px; text-align: center; text-decoration: none;  font-size: 11px; margin: 1px 1px;
  cursor: pointer; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-radius: 3px; position: relative; /* z-index: 99; */}
.button2:hover {box-shadow: 0 10px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);background-color: #B50E1A;color:white;}

.button a{
	text-decoration: none;
	color:white;
}

/* Extra styles for the cancel button */
.cancelbtn {width: auto; padding:8px; background-color: #f44336; border-radius:5px; }
.cancelbtn:hover {opacity: 0.8;}

.modalcontainer {padding: 16px;}
.modalcontainer [type=submit]{
  width: auto;
  padding: 8px 10px;
  border-radius:5px;
  background-color: #051D5B;
  color:white;
}
.modalcontainer [type=submit]:hover{
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);background-color: #B50E1A;
}


span.psw {float: right; padding-top: 16px;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

.modal-content input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,.close:focus { color: red; cursor: pointer;}

/* Add Zoom Animation */
.animate { -webkit-animation: animatezoom 0.6s;  animation: animatezoom 0.6s}

@-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}}
@keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)}}



.scroll{overflow-x:auto;border: solid 1px var(--bacbue);border-radius:5px;}
/* ----------------------------- */

.engraved {font-size: 35px; font-family: Poppins; background-color: #051D5B; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent;text-shadow:rgba(245,245,245,0.5) 2px 2px 1px;}
.embossed{color: #f0f0f0;font-size: 35px; font-family: Poppins; background-color: #666666; text-shadow: 1px 4px 4px #555; text-align: center; -webkit-background-clip: text;   -moz-background-clip: text;}
 
.center {text-align: center;}

.pagination { display: inline-block;}
.pagination a {color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; margin: 0 4px;}
.pagination a.active {background-color: #4CAF50; color: white; border: 1px solid #4CAF50;}
.pagination a:hover:not(.active) {background-color: #ddd;}


.gridcontainer {
  display: grid;
  width:50%;
  margin: auto;
  grid-template-columns: auto auto auto auto ;
  /* background-color: #C5C6C8; */
  padding: 1px;
}
.gridcontainer div { border: 1px solid #C5C6C8; font-size: 20px; text-align: center;}
.gridcontainer button {
  background-color: #fff;
  border: 1px solid white;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.gridcontainer button:hover {
  background-color: #051D5B;
  border: 1px solid blue;
  color: white;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  width: 100%;
}

.pageheader{background-color:#051D5B; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			box-shadow: -3px 3px 10px var(--bacblue); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-bottom: 10px;margin-left:20px;margin-right:20px;}
.pageheader h1{color:white;}

#footersection{
  margin-top: 10px;
  text-align: right;
  padding:20px;
  background-color: var(--bacbue);
  color: var(--bacwhite);
  border-radius: 5px;
  box-shadow: -3px 3px 10px var(--bacbue);
}  

/* SLIDER CSS */
/* body {font-family: Verdana, sans-serif;} */
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container { max-width: 100%; position: relative; margin: auto;}
/* Caption text */
.text {color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}
/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
/* The dots/bullets/indicators */
.dot {height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active {background-color: #717171;}
/* Fading animation */
.fade {animation-name: fade;animation-duration: 1.5s;}
@keyframes fade {from {opacity: .4} to {opacity: 1}}


/* PROJECTS TEMPLATE */
.button-controls-parent{ width: 100%; display: flex; justify-content: space-between;}
.button-controls-childright{}
.button-controls-childright input[type=text]{ border-radius: 3px; padding: 5px; height: max-content; margin:0;}
.button-controls-childright input[type=text]::placeholder{font-style:italic;}

.form-popup {display: none; position: fixed; border: 3px solid #f1f1f1; z-index: 2; background-color: Gainsboro; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%;}
.form-popup4 {display: none; width: 100%; border: 3px solid #f1f1f1; background-color: Gainsboro;}
.form-container { max-width: 100%; margin:auto; padding: 10px; border: solid 1px; /* background-color: Gainsboro; */}
.form-container input[type=text], .form-container input[type=date], .form-container input[type=password],.form-container input[type=number], .form-container input[type=email], .form-container select {font-family: Arial, Helvetica, sans-serif; width: 100%; padding: 10px; margin: 5px 0 3px 0; border: solid 1px; /* background: #f1f1f1; */}
.form-container input[type=text]:focus, .form-container input[type=password]:focus, .form-container input[type=date]:focus { background-color: #ddd; outline: none;}
.form-container .btn {background-color: #0B145E; color: white; padding: 10px 10px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8;}
.form-container .cancel {background-color: #B50E1A;}
.form-container .btn:hover, .open-button:hover {opacity: 1;}

.form-update{border: 1px solid #6d6d6d;width: 40%;}
.form-update td:nth-child(1){text-align: top; border: none; font-weight: bold;}
.form-update td:nth-child(2){text-align: left; border: none;font-weight: bold;}
.form-update table{width: 100%;}
.form-update input, .form-update textarea, .form-update select{padding: 10px;width: 100%;}
.form-update input[type=submit]{background-color: #0B145E; color: white; border: none;}
.form-update input[type=submit]:hover{ background-color: #B50E1A; color: white; border: none;}

/* SAVE FORM*/
.parent{background-color: white; display: flex; width: 100%; border: 0px solid; border-radius: 5px;}
.childleft{ padding: 10px; width: 40%;}
.childright{ padding: 10px; border-left: 1px solid;  width: 60%;}
.saveform input[type=submit], .saveform input[type=file]{padding: 10px; background-color: #0B145E; color: white; border-radius: 5px; border: none;}
.saveform {padding: 10px; /* background-color: #B50E1A; color: white; */ color: black; width: 100%; border-radius: 5px; border: none;}

/* projects table CSS */
#projects {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  border: #ddd solid 1px;
  /* border-collapse: collapse; */
  width: 100%;
}
/* .h1 {font-family: Arial, Helvetica, sans-serif;} */
#projects td, #projects th { border: 1px solid #BCBDC0; padding: 2px;}
#projects tr:nth-child(even){background-color: #f2f2f2;}
#projects tr:hover {background-color: #ddd;}
#projects th { padding-top: 5px; padding-bottom: 5px; font-size: 11px; text-align: center; background-color: #0B145E; color: white;}
#projects input { width: 100%; font-size: 11px;}
#projects textarea { width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px; resize: none;}
/* #pbutton { height: 100%; background-color: #0B145E; color: white; padding: 5px;} */

.gridpopup {display: none;}

/* SAVE FORM*/
.parent{background-color: white; display: flex; width: 100%; border: 0px solid; border-radius: 5px;}
.childleft{ padding: 10px; width: 40%;}
.childright{ padding: 10px; border-left: 1px solid;  width: 60%;}
.saveform input[type=submit], .saveform input[type=file]{padding: 10px; background-color: #0B145E; color: white; border-radius: 5px; border: none;}

.saveform {padding: 10px; /* background-color: #B50E1A; color: white; */ color: black; width: 100%; border-radius: 5px; border: none;}

form{
    background-color: var(--bacwhite);
	
    /* padding: 10px 20px; */
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    border-radius: 5px;
    /* padding-bottom: 2em; */
}


.mygrid{display: grid; grid-template-columns: auto auto auto auto auto auto auto auto;}
/*-------------SELECT ---------------*/
.field-holder-select{
  position: relative;
  width: 200px;
  height: 30px;
  margin: 15px;
}
.field-holder-select select{
  width: 180px;
  /* height: 100%; */
  outline: 1.4px solid var(--bacbue);
  border: var(--bacwhite);
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 18px;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  box-sizing:content-box;
} 
.field-holder-select select:focus{outline: 2px solid var(--bacred);}
.field-holder-select select:focus + label{
  top: -10px;
  font-size: 10px;
  color: var(--bacred);
}
.field-holder-select select:not([value="0"]) + label{
  top: -10px;
  font-size: 10px;
  color: var(--bacbue);
}
.field-holder-select label{
  position: absolute;
  top: 5px;
  left:5px;
  font-size: 18px;
  font-weight: 100;
  padding: 0 5px;
  pointer-events: none;
  transition: top .2s;
  background-color: var(--bacwhite);
  color: var(--bacgrey);
}
/*--------------INPUTS-------------------*/
.field-holder{
  position: relative;
  width: 200px;
  height: 30px;
  margin: 15px;
}
.field-holder input{
    width: 100%;
    height: 100%;
    outline: 1.4px solid var(--bacbue);
    border: var(--bacwhite);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 18px;
}
.field-holder input:focus{outline: 2px solid var(--bacred);}
.field-holder input:focus + label{
    top: -10px;
    font-size: 10px;
    color: var(--bacred);
}

.field-holder input:not(:placeholder-shown) + label{
    top: -10px;
    font-size: 10px;
    color: var(--bacbue);
}
.field-holder label{
    position: absolute;
    top: 5px;
    left:5px;
    font-size: 18px;
    font-weight: 100;
    padding: 0 5px;
    pointer-events: none;
    transition: top .2s;
    background-color: var(--bacwhite);
    color: var(--bacgrey);
}

/*--------------HIGHLIGHTED INPUTS-------------------*/
.field-holder-highlight {
  position: relative;
  width: 200px;
  height: 30px;
  margin: 15px;
}
.field-holder-highlight input{
  width: 100%;
  height: 100%;
  outline: 3.0px solid var(--bacred);
  border: var(--bacred);
  /* background-color:aqua; */
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 18px;
}
.field-holder-highlight input:focus{outline: 2px solid var(--bacred);}

.field-holder-highlight input:focus + label{
    top: -10px;
    font-size: 10px;
    color: var(--bacred);
}
.field-holder-highlight input:not(:placeholder-shown) + label{
    top: -10px;
    font-size: 10px;
    color: var(--bacbue);
}
.field-holder-highlight label{
    position: absolute;
    top: 5px;
    left:5px;
    font-size: 18px;
    font-weight: 100;
    padding: 0 5px;
    pointer-events: none;
    transition: top .2s;
    background-color: var(--bacwhite);
    color: var(--bacred);
}
/*--------------HIGHLIGHTED SELECT-------------------*/
.field-holder-select-highlight{
  position: relative;
  width: 200px;
  height: 30px;
  margin: 15px;
}
.field-holder-select-highlight select{
  width: 100%;
  /* height: 100%; */
  outline: 1.4px solid var(--bacred);
  border: var(--bacwhite);
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 18px;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  box-sizing:content-box;
} 
.field-holder-select-highlight select:focus{outline: 2px solid var(--bacred);}
.field-holder-select-highlight select:focus + label{
  top: -10px;
  font-size: 10px;
  color: var(--bacred);
}
.field-holder-select-highlight select:not([value="0"]) + label{
  top: -10px;
  font-size: 10px;
  color: var(--bacbue);
}
.field-holder-select-highlight label{
  position: absolute;
  top: 5px;
  left:5px;
  font-size: 18px;
  font-weight: 100;
  padding: 0 5px;
  pointer-events: none;
  transition: top .2s;
  background-color: var(--bacwhite);
  color: var(--bacgrey);
}

/*--------------READONLY INPUTS-------------------*/
.field-holder input:read-only{
  width: 100%;
  height: 100%;
  outline: 1.4px solid var(--bacbue);
  border: var(--bacwhite);
  background-color: #ececec;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 18px;
  color: var(--bacblue);
}


#btn{
    width: 200px;
    height: 34px;
    border: none;
    outline: none;
    background-color: var(--bacbue);
    color: var(--bacwhite);
    padding: 6px;
}
#btn:hover {
  width: 200px;
  height: 34px;
  border: none;
  outline: none;
  background-color: var(--bacred);
  color: var(--bacwhite);
  padding: 6px;
}

 .tickbox {
  display:block;
	margin-left: 20px;
	margin: auto;
	max-width: 250px;
}

.tickbox input {
  height: 1.5em;
  width: 1.5em;
  margin-left: 0px;
  vertical-align: middle;
} /**/