html {
  scroll-behavior: smooth;
}

/* body */
BODY {
	background: var(--customBackgroundDefault);
}

/* primary logo */
.logo {
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.logo img {
	width: 350px;
	max-width:300px;
	margin: 0 auto;
}


/* header - primary masthead - hero */
.main {
	padding: 45px 40px;
	color: #fff;
	font-family: var(--customFontMain), var(--customFontBase);
	font-size: 1.2em;
}
.main {
    background: linear-gradient(45deg,#19bef0, #ffaf00, #19bef0, #19bef0, #ffaf00, #19bef0, #19bef0, #ffaf00 );
    background-size: 1200% 100%;
    animation: gradient 16s linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% { background-position: 0%}
    100% { background-position: 100%}
}

/* footer */
.copy {
	background: var(--customBackgroundColor1);
	padding: 25px 40px;
	color: #fff;
	font-family: var(--customFontMain), var(--customFontBase);
	font-size: var(--customTextSizeCopy);
}


/* base rows */
.row {
	background: var(--customBackgroundColor1);
	color: var(--customTextColorWhite);
	padding: 25px 40px;
	font-family: var(--customFontMain), var(--customFontBase);
	font-size: 1.2em;
	display: block;
}
.row-2col {
	background: var(--customBackgroundColor1);
	padding: 25px 40px;
	color: #fff;
	font-family: var(--customFontMain), var(--customFontBase);
	font-size: var(--customTextSizeDefault);
	display: flex;
}
.row-col1 {
	width: 70%;
}
.row-col2 {
	width: 30%;
}

.row-2col3070 .row-col1 {
	width: 30%;
}
.row-2col3070 .row-col2 {
	width: 70%;
}

/* base H tags h1-h3 */
H1 {
	font-size: var(--customTextSizeH1);
	font-family: var(--customFontMain),var(--customFontBase);
	font-weight: 800;
	margin: 0;
	padding: 0;
}
H2 {
	font-size: var(--customTextSizeH1);
	font-family: var(--customFontMain),var(--customFontBase);
	font-weight: 800;
	margin: 0;
	padding: 0;
}

.header-big {
	font-size: var(--customTextSizeHBig);
}

.header-regular {
	font-size: var(--customTextSizeHRegular);
	margin-bottom: 20px;
	color: var(--customTextColorSubHeader);
}

/* lists */
.list { 
	font-weight:600;
}
.no-bullets {
	list-style-type: none;
}


/* contact box */
.contact { 
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	text-align: center;
}
.contact-button {
        background-color: var(--customButtonColor);
		border-radius: 8px;
        color: var(--customTextColorWhite);
		font-weight: bold;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1.4em;
        margin: 0px 0 10px 0;
        cursor: pointer;
		width: 100%;
}
.contact-button:hover {
	color: var(--customTextColorWhite);
	background: var(--customButtonColorHover);
}
.contact-text { 
	color: var(--customTextColorContent2);
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.85em;
}


/* cards */
.cards {
}
.card {
	margin-bottom:30px;
}
.card:not(:first-child) {
    margin-top:30px;
}
.card .row-col2, .card .row-col1 {
	color: var(--customTextColorContent);
}

.card .row-col1 {
	width: 200px;
}
.card .row-col1 IMG{
	width: 100%;
	height: auto;
}
.card .row-col2 {
	width: 85%;
	padding-left: 20px;
	padding-right: 20px;
}
.card-content {
	font-size: 0.8em;
	font-weight: normal;
	padding-bottom: 10px;
	padding-top: 5px;
}
.card-title {
	font-weight: 800;
}
.card-link {
	font-size: 0.8em;
}

.card-link A {
	color: var(--customLinkColor);
	text-decoration: underline;
}
.card-link A:hover {
	color: var(--customLinkColorHover);
	text-decoration: none;
}



/* misc */
.bg-white {
	background: var(--customWhite);
}
.nopads {
	padding: 0;
}
.padding-left0 {
	padding-left: 0;
}
.pad-top40 {
	padding-top: 40px;
}
.pad-left30 {
	padding-left: 30px;
}


.pad0margin0 {
	padding: 0px;
	margin: 0px;
}

P { 
	color:#444; 
	margin: 0 0 10px 0;
}
P:last-child {
	margin: 0 0 0px 0;
}
.li-5 LI {
	margin-bottom: 5px;
}
.li-10 LI {
	margin-bottom: 10px;
}



/* base roots */
:root {
	
	/* colors */
	--customWhite: #fffff;
	--customBlack: #000;
	--customBackgroundDefault: #fffff;
	--customBackgroundColor1: #19bef0;
	
	--customTextColorHeader: #333;
	--customTextColorSubHeader: #19bef0;
	--customTextColorContent: #333;
	--customTextColorContent2: #555;
	--customTextColorWhite: #ffffff;
	
	--customButtonColor: #feae00;
	--customButtonColorHover: #19bef0;
	
	/* link colors */
	--customLinkColor: #444;
	--customLinkColorHover: #80cc28;
	
	
	/* text sizes */
	--customTextSizeDefault: 1.2em;
	--customTextSizeCopy: 1.2em;
	--customTextSizeH1: 1.5em;
	--customTextSizeH2: 1.5em;
	--customTextSizeHBig: 2.7em;
	--customTextSizeHRegular: 1.6em;
	
	/* fonts */
	--customFontMain: 'Montserrat';
	--customFontBase: 'arial';
}

.scrollup {
  width: 30px;
  height: 30px;
  background:#555;
  opacity: 0.5;
  text-decoration:none;
  font-weight:900;
  text-align:center;
  color:#fff;
  opacity:0.7;
  border-radius:50%;
  position: fixed;
  bottom: 12px;
  right: 12px;
  font-family: var(--customFontMain),var(--customFontBase);
}


/* media queries */
@media only screen and (max-width: 768px) {
  
	/* rails */
	.logo, .main, .row-2col, .row, .copy { 
		padding: 20px; 
	}
	
	/* logo */
	.logo img { 
		width: 100%;
		max-width: 300px;
	}
	
	.main {
		font-size: 1.0em;
	}
	
	/* base rows */
	.row-2col { 
		flex-direction: column;
	}
	.row-col1, .row-col2 { 
		width: 100% !important;
	}
	
	/* htags */
	H1 {
		font-size: 1.3em;
		font-weight: 600;
		font-family: var(--customFontMain),var(--customFontBase);
		
	}
	H2 {
		font-size: 1.5em;
		font-weight: 600;
		font-family: var(--customFontMain),var(--customFontBase);
	}
	
	/* cards */
	.card .row-col1 img {
		margin: 0 auto;
		max-width: 250px;
	}
	.card .row-col1 {
		text-align: center;
	}
	.card .row-col1, .card  .row-col2 {
		padding: 0;
		width: 100%;
	}
	.card .row-col2 {
		padding-top: 10px;
	}
	
	.list UL {
		padding: 0;
	}
	
	#contactTop {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	
}


/* contact form stuff */
.formOK { 
	padding: 20px;
	text-align: center;
	color: #fff;
	background: #393;
	font-weight: bold;
	font-family: var(--customFontMain),var(--customFontBase);
}
.formNotOK { 
	padding: 20px;
	text-align: center;
	color: #fff;
	background: #933;
	font-weight: bold;
	font-family: var(--customFontMain),var(--customFontBase);
}

/* modal */
 /* 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 */

}

/* Modal Content/Box */
input, textarea {
	width: 100%;
	color:#222;
}
.formElement {
	margin-top: 10px;
	margin-bottom: 10px;
}
.modal-content {
	font-weight:bold;
  background-color: #fff;
  margin: 30px auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius:8px;
  width: 90%; /* Could be more or less, depending on screen size */
  max-width:400px;
  position:relative;
  font-family: var(--customFontMain),var(--customFontBase);
}

/* The Close Button */
.close {
	font-family: var(--customFontMain),var(--customFontBase);
  color: #900;
  font-weight:bold;
  position:absolute;
  top:10px;
  right:10px;
  font-size: 12pt;
  font-weight: bold;
  border-radius:4pt;
  background:#999;
  color:#fff;
}

.close:hover,
.close:focus {
	 background:#900;
  color: #fff;;
  text-decoration: none;
  cursor: pointer;
}