@charset "utf-8";
body { 
font-family: Cagliostro, Georgia, sans-serif; font-size:12pt; background:#99ccff; margin: 0; padding: 0; text-align: center; color: #FFF; }
img {max-width: 100%; height: auto; }
* {box-sizing: border-box;}
H1, H2, H3, H4, H5   { 	font-family: Cagliostro, Geneva, Arial, Helvetica, sans-serif; 	font-weight: bold; 	text-align: center; }
H1   { 	color: #000; 	font-size: 18pt; }
H2  { 	color: #ff0; 	font-size: 16pt; }
H3 { 	color: #000; 	font-size: 14pt; }
p, td, ul  { font-size: 12pt; line-height:16pt; padding-right: 6px; padding-left: 6px; color:#FFF; }


@media only screen and (max-width: 768px) {H1, H2, H3, H4, H5   {font-size: 14pt; } }

#contctr { width:100%; text-align:center; background-color: #99ccff; }
#content { width: 99%; border: double; border-color:#009; border-width:thick; padding: 0; margin: 0 auto; text-align:left; background-color:#000; }
#content a, a:visited {color:#9CF; font-weight:bold; text-decoration:underline; }
#content a:hover   { color: #00F; font-weight: bold; text-decoration:none; }
#content a:active {color:#9CF; font-weight:bold; text-decoration:underline; }


#fltrtbox {	float:right; width:63%; margin:0; padding:0 36px 0 0; color:#fff; }
@media only screen and (max-width: 600px) { #fltrtbox { float:none; width:100%; padding:0; } }
#fltrtbox a, a:visited, a:hover, a:active {color:#9cf; font-weight:bold; text-decoration:underline; } 

#fltlftbox { float:left; width:32%; border:double; border-width:thick; border-color:#fff; margin-right: 4%; padding:8px; background-color:#9cf; font-weight:bold; }
@media only screen and (max-width: 600px) { #fltlftbox { float:none; width:100%; margin:0; } }
#fltlftbox a, a:visited, a:hover, a:active {color:#00f; font-weight:bold; text-decoration:underline; } 

.nav a, a:link, a:visited {color:#009;}
.nav a:hover {color:#009; }


#footer {padding:8px; font-size:10pt; border-top:double #fff; padding-top:8px;}
#footer p, td, ul  { font-size: 10pt; line-height:normal; padding-right: 6px; padding-left: 6px; color:#FFF; font-weight:bold; }
#footer a, a:visited {color:#9CF; font-weight:bold; text-decoration:underline; }
#footer a:hover   { color: #00F; font-weight: bold; text-decoration:none; }
#footer a:active {color:#9CF; font-weight:bold; text-decoration:underline; }

.bgblk { background:#000; color:#fff; }
.bgltblue { background:#99ccff; }
.caption  { color: #9cf; font-size: 11pt; font-weight: bold; text-align:center; }
.captionlft  { color: #9cf; font-size: 11pt; font-weight: bold; text-align:left; }
.pcenter { text-align: center; }
.pright {text-align: right; }
.pleft {text-align:left; }
.pcenter10 { text-align: center; font-size:10pt;}
.pright10 {text-align: right; font-size:10pt;}
.pleft10 {text-align:left; font-size:10pt;}
.big {font-size:"+4pt"; font-weight:bold; line-height:normal; }
.boldital { font-style: italic; font-weight: bold; }
.bold { font-weight: bold; }
.brdrwhite {border:#FFF; border-style:double; border-width:medium; background-color:#9cf; padding:12px; margin:8px; }
.nopad {padding:0; }
.fltrt {float:right;}
.fltrt50 {float:right; width:49%;}
.fltrt33 {float:right; width:33%; margin-left:12px; border:1pt solid #777;}
@media only screen and (max-width: 600px) {.fltrt33 {float:none; width:100%; margin-left:0; border:none;}}
.fltrt33no {float:right; width:33%; }
@media only screen and (max-width: 600px) {.fltrt33no {float:none; width:100%; margin:0; }}
.white {color:#fff;}
.black {color:#000;}
.nav {color:#009; line-height:1em; font-variant:small-caps; font-weight:bold; }
.yellow {color:#ff0; }

.ltl-img {text-align:center; vertical-align:middle; max-width:18%; padding:8px; height:auto; }
@media only screen and (max-width: 600px) { .ltl-img {text-align:center; vertical-align:middle; max-width:32%; padding:8px; height:auto; }  }

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.fltrtbox {	float:right; width:63%; margin:0; padding:0 36px 0 0; color:#fff; }
@media only screen and (max-width: 600px) { .fltrtbox { float:none; width:100%; padding:0; } }
.fltrtbox a, a:visited, a:hover, a:active {color:#9cf; font-weight:bold; text-decoration:underline; } 
.clear { clear:both; }

.row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */  flex-wrap: wrap; padding: 0 4px; }
.column {  -ms-flex: 25%; /* IE10 */  flex: 25%;  max-width: 25%;  padding: 0 4px;}
.column img {  margin-top: 8px;  vertical-align: middle;  width: 100%;}

@media screen and (max-width: 1200px) { .column { -ms-flex: 50%; flex: 50%; max-width: 50%; } }
@media screen and (max-width: 768px) { .column { -ms-flex: 100%; flex: 100%; max-width: 100%; } }

/* Button used to open the contact form - fixed at the bottom left of the page */
.open-button {
  background-color: #000;
  color: white;
  padding: 8px;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 0;
  left: 0;
  width:300px;
  max-width: 47%;
  font-weight:bold;
  font-size:120%;
  text-align:center;
  border-radius:8px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width:300px;
  border: 2px solid #f1f1f1;
  border-radius:8px;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  position: fixed;
  bottom: 0;
  width: 300px;
  padding: 10px;
  background-color: white;
  z-index:1;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width:100%;
  padding: 12px;
  margin: 5px 0 5px 0;
  border: 1px solid #ddd;
  background: #f1f1f1;
  border-radius:8px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btnfrm {
  background-color: #99ccff;
  color: white;
  font-size:120%;
  font-weight:bold;
  padding: 12px;
  border: none;
  cursor: pointer;
  width:100%;
  margin-bottom:10px;
  margin-top:10px;
  opacity: 0.7;
  border-radius:8px;
}

/* Add a dark gray background color to the cancel button */
.form-container .cancel {
  background-color: #333;
}

/* Add some hover effects to buttons */
.form-container .btnfrm:hover, .open-button:hover {
  opacity: 1;
}