@charset "UTF-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background-color: #202b38;
  	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
	text-rendering: optimizeLegibility;
}

body {
	line-height: 1.4;
	max-width: 800px;
	margin: 20px auto;
	padding: 0px 10px 0px 10px;
	word-wrap: break-word;
	color: #dbdbdb;
	background: #fff;
	background: var(--background-body);
	text-rendering: optimizeLegibility;
}

.logowrapper {
	padding-top: 5%;
}



.mainpanel {
	padding: 20px 0px 20px 0px;
	position: relative;
}

.intropanel {
	padding: 10px 0px 30px 0px;
}

h1 {
	color: #fff;
	font-size: 2.2em;
	margin-top: 0;
}

h3 {	
    color: #ffffffa1;
	font-size: 1.5em;
	margin-top: 10px;  
}

h3 a:link {
  text-decoration: none;
}

h3 a:link {
    color: #ffffffa1;
} 
h3 a:active {
    color: #ffffffa1;
}
h3 a:hover {
    color: red;
}

ul li{
/*      margin: 1px 5px 10px 0px;  */
		list-style: none;
		width: 200px;
		height: 40px;
		color: #fff;
/*		padding: 10px;              */
		background-color: #161f27;
		border-radius: 8px;
		border: none;
}

.form-labels {
	padding-top: 5px;
	padding-bottom: 0px;
	padding-left: 2px;
	margin: 0px 5px 0px 0px;
}

/*
.bpmform {
	padding: 0px 5px 20px 0px;
}
*/

/*
.bpmform label{
	display: block;
	padding-top: 10px;
	padding-bottom: 2px;
	padding-left: 2px;
}
*/

.bpmform input [type] = "submit" {
	width: 200px;
/*	height: 40px; */
	color: #fff;
	background-color: #0c151c;
	border-radius: 8px;
	border: none;
}

.results {
    background: none;
    padding: 8px;
}

.results-line {
    background: #161f27;
    padding-left: 3px;
    color: #ffffffa1;
}

.result-label {
    padding-left: 5px;
}

.input-field {
    margin: 0px 5px 10px 0px;
	width: 200px;
	height: 40px;
	color: #fff;
	padding: 10px;
	background-color: #161f27;
	border-radius: 8px;
	border: none;
    display: block;
    font-size: 90%;
}


#calculate {
	width: 200px;
	height: 40px;
	color: #fff;
	background-color: #0c151c;
	border-radius: 8px;
	border: none;
    display: block;
    font-size: 90%;
}

/* divide here */
.lowerpanel {
    column-count: 3;
    padding: 10px 10% 5% 0%;
    display: block;  
}


.panel-footer {
    text-align: center;
    margin: 3px 0px 5% 0px;
     
}

/* ---- FOOTER ELEMENTS ---- */

.footer-container {
	padding: 1rem 0 0rem 0;	
}

.footer {
	position: relative;
	bottom: 0;
	width: 762px;
	height: 40%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer-heading {
	display: flex;
	flex-direction: column;
	margin-right: 5%;
}

.footer-heading h2 {
	margin-bottom: .5rem;
	color: #ff0000;
}

.copyright {
	position: relative;
	bottom: 10%;
	
}
/*
.footer-heading h5 {
	margin-bottom: .5rem;
	text-decoration: none;
	color: darkgray;
}	*/



.footer-heading a {
	color: #fff;
	text-decoration: none;
	margin-bottom: 0.5rem;
}


a:visited {
	color: darkgray;
}

a:hover {
 	text-decoration: none;
	color: red;
}


.form-heading a:hover {
	color: red;
	transition: 0.3s ease-out;
}

.footer-email-form h2 {
	margin-bottom: 2rem;	
}

#footer-email {
	width: 250px;
	height: 40px;
	border-radius: 4px;
	outline: none;
	border: none;
	padding-left: 0.5rem;
	font-size: 1rem;
	margin-bottom: 1rem;
}

#footer-email::placeholder {
	color: #b1b1b1;
}

#footer-email-btn {
	width: 100px;
	height: 40px;
	border-radius: 4px;
	outline: none;
	background-color: #f9423d;
	outline: none;
	border: none;
	color: #fff;
	font-size: 1rem;
}

#footer-email-btn:hover {
	cursor: pointer;
	background-color: #337a41;
	transition: all 0.4s ease-out;
}

@media screen and (max-width: 1240px) {
	.footer {
		height: 50vh;
	}
	.footer-email-form {
		margin-top: 4rem;
	}

	@media screen and (max-width: 1024px) {
	.footer {
		padding-top: 2rem;
	}
@media screen and (max-width: 720px) {
	.footer-3 {
		display: none;
	}
	.footer-email-form {
		margin-top: 1rem;
	}