@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

* {
  padding: 0;
  max-width: 1200px;
  margin: auto;
/*  margin: 0 2px;*/
  box-sizing: border-box;
}

body {
  color: white;
  background-color: #000000;
  margin: 4px;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:17px;
  background-image:url(images/mf_bkgnd_blue.png)
}

/*#gallerypanel {
  position: relative; 
  padding: 15px;
  background: black;
  background-image:url(images/panel_bkgnd.jpg); 
  border-radius: 15px;
  box-shadow: 0px 0px 2px 3px lightgray, 0px 0px 2px 3px lightgray inset;
  z-index: -1;
}*/

#mainpanel {
  position: relative; 
  padding: 15px;
  background: black;
  background-image:url(images/panel_bkgnd.jpg); 
  border-radius: 15px;
/*  box-shadow: 3px 3px 3px 3px lightgray, 3px 3px 3px 3px lightgray inset;*/
  box-shadow: 0px 0px 2px 3px lightgray, 0px 0px 2px 3px lightgray inset;
/*  z-index: -1;*/
}

#mainpanel p {
  width: 80%;
  text-align: left;
  margin-left: 10%;
  padding-top: 10px;
}

#infopanel {
  position: relative; 
  padding-bottom: 10px;
  margin-left: 0;
  width: 100%; 
  display: flex; 
/*  background-image:url(images/info_panel5.png); */
  z-index:1
}

.imggrid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
  justify-content: center; /* centers items horizontally */
  align-items: center; /* centers items vertically */
/*  gap: 10px;*/
}

.logospanel {
  position: relative; 
  padding-bottom: 10px;
  margin-left: 0;
  width: 100%; 
  display: flex; 
/*  background-image:url(images/info_panel5.png); */
  z-index:1
}

.basic_panel {
  position: relative;
  width: 98%;
  margin: 4px;
  padding: 18px;
  border-radius: 20px;
  background-color: black;
  box-shadow: 1px 1px 1px 1px lightgray, 1px 1px 1px 1px lightgray inset;
/*  background-image: url(images/panel_corner_ul.png), url(images/panel_corner_ur.png), url(images/panel_corner_ll.png), url(images/panel_corner_lr.png), url(images/panel_left.png), url(images/panel_right.png), url(images/panel_top.png), url(images/panel_bottom.png), url(images/panel_bkgnd.jpg); 
;
  background-position: left top, right top, left bottom, right bottom, left, right, top, bottom;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x, repeat;*/
/*  background: url(images/panel_left) left repeat-y;*/
  background-image:url(images/panel_bkgnd.jpg); 
}

.basic_panel p {
  width: 80%;
  text-align: left;
  margin-left: 10%;
  padding-top: 10px;
}

.infopane {
  float: left;
  left: 0%;
  width: 50%; 
  text-align: left;
/*  margin-right: 4px;
  margin-bottom: 2px;
  margin-left: 0px;*/
  padding-top: 10px;
  padding-bottom: 10px; 
  padding-left: 5%;
  border-radius: 15px;
  background: black;
  background-image:url(images/panel_bkgnd.jpg); 
  box-shadow: 0px 0px 2px 3px lightgray, 0px 0px 2px 3px lightgray inset;
/*  box-shadow: 3px 3px 3px 3px lightgray, 3px 3px 3px 3px lightgray inset;*/
}

.infopaneleft {
  float: left;
  left: 0%;
  width: 50%;
  height: 288px;
  margin: 0; 
  text-align: left;
  padding-top: 25px;
  padding-bottom: 10px; 
  padding-left: 5%;
  padding-right: 2%;
  background: black;
  background: url(images/info_paneLb.png) right top no-repeat, url(images/info_paneLa.png) left top no-repeat;
  background-repeat: no-repeat;
}

.infopaneright {
  float: left;
  left: 0%;
  width: 50%;
  height: 288px; 
  margin: 0; 
  text-align: left;
  padding-top: 25px;
  padding-bottom: 10px; 
  padding-left: 5%;
  padding-right: 5%;
  background: black;
  background: url(images/info_paneRb.png) left top no-repeat, url(images/info_paneRa.png) right top no-repeat;
  background-repeat: no-repeat;
}

.imgpane {
  text-align: center;
  padding-top: 20px;
}

/*.productpane {
  float: left;
  left: 0%;
  width: 33%; 
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px; 
  padding-left: 5%;
  border-radius: 15px;
}*/

/*.divider {
  position: relative; 
  width: 103%;
  left: -1.5%;
  height: 4px;
  margin-top: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 2px 2px lightgray, 0px 0px 2px 2px lightgray inset;
}*/

#textpanel {
  position: relative; 
  width: 100%; 
  min-height: 300px; 
  overflow: auto; 
  margin: auto; 
}

#textpanel p {
  width: 80%;
  text-align: left;
  margin-left: 10%;
  padding-top: 10px;
}

#infocount    {
  position: absolute; 
  top: 231px; 
  left: calc(50% - 40px);
  text-align: left; 
  border: 0px solid; 
  border-color: #00f000
}

#fbpanel {
  position: relative; 
  padding-bottom: 10px;
  width: 100%; 
  margin: auto;
  text-align:center; 
  z-index: 0; 
/*  border: 0px solid; 
  border-color: #00f000*/
}

#footerpanel {
  position: relative; 
  width: 100%; 
/*  height: 10px; */
  margin: auto; 
  text-align:center; 
  z-index: 0
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: yellow;
}

#headerpanel {
  position: relative;
  width: 100%;
  height: 100px;
  margin-bottom: 4px;
  padding-bottom: 4px;
}

header a {
  text-decoration: none;
}

header {
  position: absolute;
  padding-right: 10px;
  top: 58px;
  height: 40px;
  width: 90%;
  right: 2%;
  display: flex;
  margin-right: 4px;
  margin-bottom: 4px;
/*  padding-top: 10px; 
  padding-left: 5%;*/
  border-radius: 15px;
  background: black;
  background-image:url(images/panel_bkgnd.jpg); 
  box-shadow: 1px 1px 1px 1px lightgray, 1px 1px 1px 1px lightgray inset;
  justify-content: space-between;
/*  background-image:url(images/menu_bckgnd_mobile2.png); 
  background-repeat: no-repeat;
  background-position: right;*/
}

/*header {
  padding-right: 10px;
  height: 50px;
  display: flex;
  background-image:url(images/menu_bckgnd_mobile2.png); 
  justify-content: space-between;
  background-repeat: no-repeat;
  background-position: right;
}*/

nav {
  margin-right: 0px;
}

#menupanel    {
  position: relative; 
  height: 50; 
/*  margin-left: auto; 
  margin-right: 0;*/
  margin: auto; 
  z-index: 2
}

#menu {
}

#logo {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  z-index: 2;
}

#brand {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
/*  z-index: 5;*/
}

#brand a {
  color: #09c372;
}

ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0;
}

ul a {
  color: silver;
/*  text-shadow: 1px 1px 2px darkgray;*/
}

ul li {
  padding: 5px;
  margin-left: 10px;
}

ul li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

li a#active {
  color: white;
  padding: 1px 8px 3px 8px;
  background-color: black;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 1px rgba(128, 128, 128, 0.5), -1px  -1px 1px 1px rgba(128, 128, 128, 0.5);
/*  font-weight: bold;*/
/*  font-style: italic;*/
}

/*#login,
#signup {
  border-radius: 5px;
  padding: 5px 8px;
}

#login {
  border: 1px solid #498afb;
}

#signup {
  border: 1px solid #ff3860;
}

#signup a {
  color: #ff3860;
}

#login a {
  color: #498afb;
}*/

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
/*  align-items: end;*/
  justify-content: flex-start;
  z-index: 6;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 40px;
  padding-top: 10px;
  right: 0;
/*  height: calc(100vh - 50px);*/
  height: 200px;
  width: 50%;
  background-image:url(images/mf_bkgnd_blue.png)
}

.mobile-menu li {
  margin: 0 2px 4px 0;
/*  margin: 0 2px;
  margin-bottom: 10px;*/
  z-index: 2;
}

@media only screen and (max-width: 685px) {
  header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }
}

.infotitle {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        text-decoration:underline;
        color: #FFFFFF;
		padding-bottom: 8px;
}

.info {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FFFFFF;
}

.info a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	text-decoration: none;
	}	
	
.info a:link {
    font-family: Arial, Helvetica, sans-serif;
	color: #F0F080;
	}
	
.info a:hover {
    font-family: Arial, Helvetica, sans-serif;
	color: #D0D0D0;
	}
	
.info a:active {
    font-family: Arial, Helvetica, sans-serif;
	color: #D0D0D0;
	}

.info a:visited {
    font-family: Arial, Helvetica, sans-serif;
	color: #F0F080;
	}
	
.info ul {
    display: list-item;
/*    height: 14px;*/
    padding: 0px;
    margin-left: 10px;
}

.info li {
    padding: 1px;
	list-style-type: square !important;
}

.info ul li:hover {
  transform: scale(1.0);
  transition: 0.3s;
}

#copyright {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
   	color: #FFFFFF;
}

.headertext { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #D0D0D0;
	margin-top: 40px; 
	text-align: center;
}

.headertext a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	text-decoration: none;
	}	
	
.headertext a:link {
    font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	}
	
.headertext a:hover {
    font-family: Arial, Helvetica, sans-serif;
	color: #D0D0D0;
	}
	
.headertext a:active {
    font-family: Arial, Helvetica, sans-serif;
	color: #D0D0D0;
	}

.headertext a:visited {
    font-family: Arial, Helvetica, sans-serif;
	color: #F0F080;
	}

.maintext { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #D0D0D0;
    width: 90%;
	margin: 40px auto; 
	text-align: center;
}

.maintext a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	text-decoration: none;
	}	
	
.maintext a:link {
    font-family: Arial, Helvetica, sans-serif;
	color: #FFFF00;
	}
	
.maintext a:hover {
    font-family: Arial, Helvetica, sans-serif;
	color: #D0D0D0;
	}
	
.maintext a:active {
    font-family: Arial, Helvetica, sans-serif;
	color: #D0D0D0;
	}

.maintext a:visited {
    font-family: Arial, Helvetica, sans-serif;
	color: #F0F080;
	}

.largetext {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #CCCCCC;
}

.hugetext {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #CCCCCC;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #0000B0;
  border: none;
  color: white;
  padding: 14px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
	border-radius: 5px;
}