/*    #popup {
            display:none;
            position:absolute;
            margin:0 auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999999;
            padding:25px 10px 10px 10px;
            border:thin black solid;
    }
*/
    
/* lobster-regular - latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lobster-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/lobster-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       /*url('/fonts/lobster-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lobster-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lobster-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lobster-v23-latin-regular.svg#Lobster') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* CSS VARIABLES */
.form-group { margin:5px 0 5px 0; }
.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.roundedimage{
	border-radius:15px;
}
.three-col {
       column-count: 3;
       column-gap: 20px;
}

:root {
	--primary: #E6F1F7;
	--dark: #333;
	--light: #fff;
	--shadow: 4px 4px 1px rgba(104, 104, 104, 0.8);
}

html {
	box-sizing:border-box;
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
	color: var(--dark);
	scroll-behavior: smooth;
}

body {
	background: white;
	margin: 10px;
	line-height: 1.4;
	background-image: url('siteimages/bg.jpg');
	background-image: url('siteimages/bg.webp');
	background-attachment: fixed;
}

.btn {
	background: var(--dark);
	color: var(--light);
	padding: 0.6rem 1.3rem; /* first num is top/bottom, second is left/right */
	text-decoration: none;
	border: 0;
}

.btn:hover {
	color:yellow
}

h1{
	font-size: 30px;
	font-weight : bold;
	background-color: transparent;
	color : darkblue;
	margin:4px 0px 10px 0px; 
	font-family: 'Lobster', cursive, Arial, sans-serif;
}

h2{
	font-size: 24px;
	font-weight : bold;
	background-color: transparent;
	color : darkblue;
	margin:4px 0px 0px 0px; 
	font-family: 'Lobster', cursive, Arial, sans-serif;
}

h3{
	font-size: 20px;
	font-weight : bold;
	background-color: transparent;
	color : darkblue;
	margin:4px 0px 0px 0px; 
	font-family: 'Lobster', cursive, Arial, sans-serif;
}

h4{
	font-size: 18px;
	font-weight : bold;
	padding-bottom:0px;
	background-color: transparent;
	color : darkblue;
	margin:4px 0px 0px 0px; 
	font-family: 'Lobster', cursive, Arial, sans-serif;
}

p { text-align: left; font-size:16px; }
ul { text-align: left; font-size:16px; }
ol { text-align: left; font-size:16px; }

img {
	max-width: 100%;
	height: auto;
	border-radius:15px;
}

footer img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	border-radius:0px;
}

.wrapper {
	display:grid;
	grid-gap: 20px;
}

a {	color:blue; }
a:hover { color:red; }

.pagesummary {
	margin:5px auto 5px auto; font-size:12px; line-height:14px; text-align: center; color: black; max-width:980px; font-family:Arial, Helvetica, sans-serif;
}

/* HEADER */
.pageheader {
	background-position: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-image: url('siteimages/header-bg.webp');
	align-items:center;
	text-shadow: 0 0 3px black, 0 0 5px black;
	min-height:200px;
}

.logo {
	font-size:2rem;
	grid-row-gap:20px;
}

.logo p { margin:0 0 0 10px; color:white }

.headercontent {
	font-size:20px;
	text-align:right;
	font-weight:bold;
	grid-row-gap:20px;
	color:white;
	margin-right:10px;
}

.headercontent a {
	color:white;
	text-decoration:none;
	text-shadow: 0 0 3px black, 0 0 5px black;
}

.headercontent p {
	text-align:right
}

/*NAV STYLES*/
#cssmenu {
  width: auto;
  font-family: Arial, sans-serif;
  line-height: 1;
  background: transparent;
float:left;
}

nav p { text-align: left; font-size:14px; }
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0 2px 0 2px;
  display: inline-block;
  float: left;
  background-color:transparent;
}

nav a {
display: block;
padding: 0 20px;
color: white;
font-size: 16px;
line-height: 48px;
text-decoration: none;
font-family: Arial, sans-serif;
background-color:darkblue;
border:1px black solid;
border-radius:10px;
}

li.dd, span.dd a{background:lightgray;color:white;}

li.dd a:hover{background-color:white;color:black;}

li.dd a{line-height: 42px;}

nav ul li ul li:hover { background-color:#eeefef; color:black; }

nav a:hover { background-color:#eeefef; color:black; }

span.toggledd a{
background:lightgray;color:black !important;
}

span.toggledd a:hover {
background:darkblue;color:white !important;
}


nav ul ul {
  display: none;
  position: absolute;
  top: 52px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ' >'; }

li > a:only-child:after { content: ''; }


/* Media Queries For Nav
--------------------------------------------- */

@media all and (max-width : 768px) {

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: darkblue;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 50px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #000000; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: white }

nav a:hover { background-color: white; color:black }

nav ul li ul li .toggle,
 nav ul ul a { background-color: white; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

label.toggledd{
background-color:#727201 !important;
}

span.toggledd a{
display:none !important;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}

/************************************************************************************
NAV
*************************************************************************************/

.menu li {
	margin-top:2px;
	margin-bottom:2px;
}

nav-main {
	margin-left:0px;
	font-family: Arial, sans-serif;
}

#nav-wrap {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin-left: -20px;
	padding-top: 3px;
	padding-bottom: 3px;
}
#nav li {
	list-style: none;
	float: none;
	margin-right: 5px;
	background-color: white;
	padding-left: 5px;
	padding-right: 5px;
}

/* nav link */
#nav a {
	padding: 2px 15px;
	display: block;
	color: white;
	background-color: darkblue;
	text-decoration:none;
	border: 1px solid black;
	border-radius:10px;
}

#nav a:hover {
	background-color: #eeefef;
	color: black;
}

/* nav dropdown */
#nav ul {
	background-color: darkblue;
	padding: 0px;
	position: absolute;
	border: solid 0px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
	margin-left:0px;
	color:white;
}

#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}

#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/* TOP CONTAINER */
.top-container {
	display:grid;
	grid-gap:20px;
	grid-template-columns:1fr 1fr;
	align-items:center;
	justify-items:center;
}

/* BOXES */
.boxes {
	display:grid;
	grid-gap:20px;
	grid-template-columns: 1fr 1fr 1fr;
}

.box {
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(230,241,247,1) 75%, rgba(230,241,247,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6f1f7',GradientType=1 ); /* ie6-9 */	
	text-align:center;
	padding: 1.5rem 2rem;
	box-shadow: var(--shadow);
	border:2px black solid;
    border-radius: 15px;  
}

/* INFO */
.info {
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(230,241,247,1) 75%, rgba(230,241,247,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6f1f7',GradientType=1 ); /* ie6-9 */
	box-shadow: var(--shadow);
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(2, 1fr);
	padding:3rem;
	border:2px black solid;
    border-radius: 15px; 
}

/* PORTFOLIO */
.portfolio {
	display:grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.portfolio img {
	width:100%;
	box-shadow: var(--shadow);
}

/* FOOTER */
footer {
	margin-top: 0rem;
	background: var(--dark);
	color: var(--light);
	text-align: center;
	padding:1rem;
}

footer a {
	color:white;
}

footer a:hover {
	color:yellow;
}

/* INNERPAGES */
.innerpage {
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(230,241,247,1) 75%, rgba(230,241,247,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6f1f7',GradientType=1 ); /* ie6-9 */
	box-shadow: var(--shadow);
	display: grid;
	grid-gap: 30px;
	grid-template-columns: 1fr;
	padding:1rem;
	border:2px black solid;
    border-radius: 15px; 
}

/* CONTACT PAGE */
.contactpage {
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(230,241,247,1) 75%, rgba(230,241,247,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6f1f7',GradientType=1 ); /* ie6-9 */
	box-shadow: var(--shadow);
	display: grid;
	grid-gap: 30px;
	grid-template-columns: 1fr 1fr 1fr;
	padding:1rem;
	justify-items:center;
	align-items:center;
	border:2px black solid;
    border-radius: 15px; 
}

/* MEDIA QUERIES */

@media(max-width: 1200px) {
	.top-container { grid-template-columns:1fr;	}
}

@media(max-width: 900px) {
	.boxes { grid-template-columns: 1fr }
}

@media(max-width: 700px) {
	.showcase h1 { font-size:2.5rem; }
	.main-nav ul { grid-template-columns:1fr; }
	.info { grid-template-columns:1fr; }
	.pageheader {
	background-position: bottom;
	grid-template-columns: 1fr;
	background-image: url('siteimages/header-bg-mobile.webp');
}
	.contactpage { grid-template-columns:1fr; }
	.logo p { text-align:center; margin:0 0 0 0; }
	.headercontent {
		font-size:20px;
		text-align:center;
		margin-right:0px;
	}
	.headercontent p { text-align:center;	}
	.info .btn {
		display:block;
		text-align:center;
		margin: auto;
	}
	.three-col {
       column-count: 2;
       column-gap: 20px;
	}
}

@media(max-width: 568px) {
	.headercontent a {
	color: yellow;
	text-decoration:underline;
	}
}

@media(max-width: 500px) {
	.three-col {
       column-count: 1;
       column-gap: 20px;
	}
}

@media screen and (min-width: 1400px) {
h1 { font-size: 36px; }
h2 { font-size: 34px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
p { font-size: 24px; }
ul { font-size: 24px; }
ol { font-size: 24px; }
}

@media screen and (max-width: 780px) {
	.img-justification-right2 { text-align: center }
	.img-justification-left2 { text-align: center }
	div.img-justification-right2 { float: none; margin-left: auto; margin-right: auto; }
	div.img-justification-left2 { float: none; margin-left: auto; margin-right: auto; }
}

@media screen and (min-width: 780px) {
	.img-justification-right2 { float:right; margin-left:5px; margin-right:5px; }
	.img-justification-left2 { float:left; margin-left:5px; margin-right:5px; }
	div.img-justification-right2 { float:right; margin-left:5px; margin-right:5px; }
	div.img-justification-left2 { float:left; margin-left:5px; margin-right:5px; }
}

@media screen and (max-width: 680px) {
	.img-justification-right { text-align: center }
	.img-justification-left { text-align: center }
	div.img-justification-right { float: none; margin-left: auto; margin-right: auto; }
	div.img-justification-left { float: none; margin-left: auto; margin-right: auto; }
}

@media screen and (min-width: 680px) {
	.img-justification-right { float:right; margin-left:5px; margin-right:5px; }
	.img-justification-left { float:left; margin-left:5px; margin-right:5px; }
	div.img-justification-right { float:right; margin-left:5px; margin-right:5px; }
	div.img-justification-left { float:left; margin-left:5px; margin-right:5px; }
}

/*SLIDESHOW*/
.mySlides {display:none;}
.w3-content{max-width:980px;margin:auto}
.w3-rest{overflow:hidden}
.w3-layout-container{display:table;width:100%}.w3-layout-row{display:table-row}.w3-layout-cell,.w3-layout-col{display:table-cell}
.w3-layout-top{vertical-align:top}.w3-layout-middle{vertical-align:middle}.w3-layout-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}
.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}
.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}
.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-animate-fading{animation:fading 6s infinite}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}
@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}