:root {
	--black: #1f1f1f;
	--primary: #037781;
	--primary-lighter: rgba(0, 119, 130, 0.4);
	--primary-darker: #024e55;
	--secondary: #802D24;
	
	--bgColor: #f8f8f8;
	--fontFamily: Montserrat, sans-serif;
	--altBg: rgba(0, 119, 130, 0.1);
	--white: white;
	--lightgray: lightgray;
	--lightgray-lighter: rgb(242, 242, 242);

	--gray: gray;

	--fs: 1rem;
	--fontsize: var(--fs);
	--lineheight: 1.8rem;
	--multiplier: 1;
	--color: var(--black);

	--u1: 8px;
	--u2: calc(var(--u1) * 2);
	--u3: calc(var(--u1) * 3);
	--u4: calc(var(--u1) * 4);
	--u5: calc(var(--u1) * 5);
	--u6: calc(var(--u1) * 6);
	--u7: calc(var(--u1) * 7);
	--u8: calc(var(--u1) * 8);

	--borderRadius1: 4px;
	--borderRadius2: 6px;
	--borderRadius4: 8px;

	--containerPadding: calc(var(--u1) * 5) calc(var(--u1) * 10);

	--multiplier: 1;
	--h1-multiplier: 1;
	--super-size: calc(var(--fontsize) * var(--multiplier) * 4 * 1.5);

	--primaryPanelBackgroundSize: 100vw;

	--screen-small: 320px;
	--screen-medium: 640px;
	--screen-big: 1000px;
	--icon-font-size: 32px;
}

@media screen and (min-width: 320px) and (max-width: 640px) {
	:root {
		--fontsize: calc(var(--fs) + 6 * ((100vw - 320px) / 680)); 
		--containerPadding: calc(var(--u6)) var(--u1);
		--multiplier: 0.8;
		--h1-multiplier: 0.5;
		--super-size: calc(var(--fontsize) * var(--multiplier) * 4);
		--primaryPanelBackgroundSize: 80vh;
		--icon-font-size: 24px;
		--circle-icon-font-size: 0.8rem;
	}
}

@media screen and (min-width: 1000px) {
	:root {
		--fontsize: calc(var(--fs) * 1.1);
		--containerPadding: calc(var(--u1) * 5) calc(var(--u1) * 26);
		--multiplier: 1;
		--h1-multiplier: 1;
	}
}

html {
	font-size: var(--fontsize);
	line-height: calc(var(--lineheight));
	color: var(--color);
}

h1 {
	font-size: calc(var(--fontsize) * var(--h1-multiplier) * 4);
	line-height: calc(var(--lineheight) * 2);
	font-weight: bolder;
}

h2 {
	font-size: calc(var(--fontsize) * var(--multiplier) * 3);
	line-height: calc(var(--lineheight) * 2);
}

h3 {
	font-size: calc(var(--fontsize) * var(--multiplier) * 2.5);
	line-height: calc(var(--lineheight) * 2);
}

h4 {
	font-size: calc(var(--fontsize) * var(--multiplier) * 2);
	line-height: calc(var(--lineheight) * 2);
}

h5 {
	font-size: calc(var(--fontsize) * var(--multiplier) * 1.5);
	line-height: calc(var(--lineheight) * 2);
}

h6 {
	font-size: calc(var(--fontsize) * var(--multiplier) * 1.2);
	line-height: calc(var(--lineheight) * 2);
}

p {
	margin: 32px 0;
}


a {
	color: var(--black);
}

a:hover {
	color: var(--primary);
}

body{
	margin: 0;
	background-color: var(--bgColor);
	font-family: var(--fontFamily);
}

.color-table {
  border-collapse: collapse;
  width: 100%;
}

.color-table td, .color-table th {
  border: 1px solid var(--lightgray);
  padding: 0 8px;
}

.color-table tr:nth-child(even){background-color: #f2f2f2;}

.color-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--primary-lighter);
}

.icns {
	width: 64px !important;
	height: 64px !important;
	color: white;
	justify-content: center;
	align-items: center;
	display: flex;
}

.circle-icon {
	margin: 16px;
    padding:16px;
    border-radius: 50%;

	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-font-size);
}

.circle-icon1 {
	background: var(--secondary);
}

.circle-icon2 {
	background-color: var(--primary-lighter);
}

.circle-icon-text1 {
	color: var(--white);
}

.circle-icon-text2 {
	color: var(--primary);
}

.circle-icon-text {
	font-size: var(--circle-icon-font-size);
}

.hamb {
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--white);
	padding: var(--u2);
}

.hamb-up {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
	padding: 0 var(--u3);
}

.super-size {
  font-size: var(--super-size);
}

.hamburger {
	color: var(--primary);
	font-size: calc(var(--fontsize) * 1.5);
}

/* p{
	font-family: Roboto, Arial, Helvetica, sans-serif;
} */

.menu-list 
{
	display: block;
	position: absolute;
	top: 16px;
	z-index: 255;
	background-color: white;
	list-style-type: none;
	padding: 16px;
	font-size: 14px;
	min-width: 200px;
	border-radius: 8px;
	box-shadow: 4px 5px 5px rgb(0 0 0 / 8%);
	-webkit-box-shadow: 4px 5px 5px rgb(0 0 0 / 8%);
}

.navbar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
	padding: var(--u1);
	background-color: var(--white);
	box-shadow: 0px 2px 2px -1px rgb(0 0 0 / 0%), 0px 4px 5px 0px rgb(0 0 0 / 0%), 0px 1px 10px 0px rgb(0 0 0 / 10%);
}

.nav-links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
}

.nav-small {
	padding: var(--u2);
	font-size: calc(var(--fontsize) * 0.8);
	cursor: pointer;
}

.nav-small:hover:after {
    opacity: 1;
    right: 100%;
    transition: all .4s ease-in-out;

    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    height: 2px;
    opacity: 0;

}

.nav-button {
	font-size: calc(var(--fontsize) * 0.8) !important;
}

.nav-small:hover{
	text-decoration: underline;
	color: var(--gray)
}

.fp-card2 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.main-content {
	min-height: 92vh;
}

.primary-panel {
	background-color: #007782;
	height: 98vh;
	opacity: 1;
	background-image: url("/img/hero9.jpg");
	background-repeat:no-repeat;
	background-size: var(--primaryPanelBackgroundSize);
	position: relative;
}

.more-info {
	background-color: var(--white) !important;
}

.more-info:hover {
	background-color: var(--lightgray) !important;
}

.layer {
	background-color: rgba(0, 119, 130, 0.8);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.container {
	padding: var(--containerPadding)
}

.alt-bg {
	background-color: var(--altBg);
}
.alt-bg2 {
	background-color: var(--primary-lighter);
}

.full {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	height: 80vh;
}

.hero-text{
	color: var(--white)
}

.all-center {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
}

.cent-text {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	align-content: stretch;
}

.footer {
	background-color: var(--black);
	min-height: 300px;
	color: var(--white);
}

.btn {
	font-size: var(--fontsize);
	text-decoration: none;
	text-decoration: none;
	border-radius: calc(var(--borderRadius1));
	padding: calc(var(--u2));
	display: inline-block;
	border: 1px solid var(--lightgray);
	background: transparent;
	cursor: pointer;
	font-family: var(--fontFamily);
}

.btn-big {
	min-width: calc(var(--u1) * 30);
}


.btn-filled {
	border: 1px solid var(--primary);
	background-color: var(--primary);
	color: var(--white);
}

.btn-filled:hover {
	background-color: var(--primary-darker);
}


.btn-outlined {
	color: #1f1f1f;
	border: 1px solid var(--lightgray);
}

.btn-outlined:hover {
	background-color: var(--lightgray-lighter);
}

.sfh-fp {
	font-size: 100pt;
}

.link {
	font-size: larger;
	padding: 10px 0
}

@keyframes fillandsign__modalFadeIn {
  from { transform: translate(0, 50px); opacity: 0; }
  to   { transform: translate(0, 0); opacity: 1; }
}
@keyframes fillandsign__modalFadeOut {
  from { transform: translate(0, 0); opacity: 1; }
  to   { transform: translate(0, 50px); opacity: 0; }
}
@keyframes fillandsign__modalBackgroundFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fillandsign__modal {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  background: white;
  box-shadow: 0 0 40px rgba(0,0,0,.3); 
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  animation: fillandsign__modalFadeOut .3s cubic-bezier(.54,.03,.67,.88);
}

.fillandsign__modal.fillandsign__modal--active {
  animation: fillandsign__modalFadeIn .3s cubic-bezier(.22,.62,.4,1);
  opacity: 1;
}

.fillandsign__modalBackground {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity .2s linear;
  z-index: 99997;
}

.fillandsign__modalBackground.fillandsign__modalBackground--active {
  animation: fillandsign__modalBackgroundFadeIn .3s;
  opacity: 1;
}

.fillandsign__misclickCapture {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 10px;
  z-index: 99998;
}

.fillandsign__modal iframe {
  z-index: 100;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.fillandsign__cssLoaded {
  display: none;
}