#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  border: none;
  line-height: 1;
  margin: 0;
  padding: 0;
}

#cssmenu {

  height: 37px;
  display: block;
  border: 1px solid;
  border-radius: 0px 0px 18px 18px;
  border-color: black;
  box-sizing: border-box;
  padding: 0;
background:rgba(33, 33, 33, 0.9);
  
}

#cssmenu > ul > li.active {
  
background:rgba(1, 1, 1, 0.9);

margin: -5px -2px 0px 0px;
height: 37px;

}



#cssmenu > ul > li {
  list-style: inside none;
  float: left;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}

#cssmenu.align-center > ul {
  text-align: center;
}

#cssmenu.align-center > ul > li {
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}

#cssmenu > ul > li > a {
  outline: none;
  display: block;
  position: relative;
  text-align: center;
  text-decoration: none;
  
  font-weight: bold;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;

  color: #ffffff;
  padding: 12px 20px;
}

#cssmenu > ul > li:first-child > a {
  
}
#cssmenu > ul > li > a:after {
  content: "";
  position: absolute;
 
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 99;
  border-color: #000000;
}

#cssmenu ul li.has-sub:hover > a:after {
  top: 0;
  bottom: 0;
}


}

#cssmenu ul li > ul li a {
  outline: none;
  display: block;
  position: relative;
  font: 10pt Arial, Helvetica, sans-serif;
  color: #000000;
  text-decoration: none;
  
  margin: 0;
  padding: 8px 20px;
}

#cssmenu,

#cssmenu ul ul li a:hover {
  background: rgba(33, 33, 33, 0.9);
}

#cssmenu > ul > li > a:hover {
  background: #333333;
  color: #ffffff;
}





------------------------------------------------

p.content { 
    color: #ffffff;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	max-height:1000000px;
	-webkit-text-size-adjust:100%;
    background-repeat: repeat;
		
	}

p.index { 
    color: #FDFDFD;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	max-height:1000000px;
	-webkit-text-size-adjust:none;
	text-align:center}

p.slogan {
    color: #000000;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		position:relative;
	max-height:1000000px;
	-webkit-text-size-adjust:none;
	top: -20px
	}

h2.gridtitle {
	color: #FFFFFF;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	position:relative;
	top: -26px;
	font-size: 140%;max-height:1000000px;
	-webkit-text-size-adjust:none;
	}

h1.contenttitle {
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: #FFFFFF;
	font-size: 120%;max-height:1000000px;
	-webkit-text-size-adjust:none;
	}

h1.welcome {max-height:1000000px;
	-webkit-text-size-adjust:none;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: #FFFFFF;
	font-size: 120%;
	position: relative;
	top: -10px}

h2.sub {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: #FFFFFF;
	font-size: 150%;}

div.content{
    background-color: #e1e1e1;
    width: 100%;
    padding: 8px 0px;
    border-radius: 18px;
   background:rgba(33, 33, 33, 0.9);
	border: 2px;
border-color: rgb(140, 130, 115)
	}
	 
div.cont{
	width:60%;
 margin: 0 auto;
}

div.inner{ margin: 0 25px;}


	
p.moreinfo{
	position:relative;
	top: -40px;
	color: #FFFFFF;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
	max-height:1000000px;
	-webkit-text-size-adjust:none;}

	div.grid{
    	background-color: #2B2B2B;
    width: 220px;
	height: 310px;
	margin: 10px;
	padding: 20px 20px 0px;
    border-radius: 25px;
	float:left;
background:rgba(10,10,10,0.75);
	border:1px solid black
	}



img.grid
	{
	width: 200px;
	height: 235px;
	position:relative;
	top: -30px;
	border:2px #000000 solid;
	border-radius:7px}
    
iframe.set
	{width:560px;height:315px}

img.art 
	{margin:0px 25px;float:left;width: 200px;
	height: 270px}

a 	{	 
	color: white;
	text-decoration: none; 
	}

img.top{
	border-radius:18px 18px 0px 0px;
	webkit-border-radius:18px 18px 0px 0px;
	-moz-border-radius:18px 18px 0px 0px;
	}

span.l
{
    color: #FDFDFD;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	max-height:1000000px;
	-webkit-text-size-adjust:100%;
    background-repeat: repeat;}

img.bottom{
	border:1px solid black; margin-left:4px; margin-top:5px; border-radius:6px; width:432px; margin: 2px 1px; align:center}

img.bottom2{
	border:1px solid black; margin-left:4px; margin-top:5px; border-radius:6px; width:700px; margin: 2px 1px; align:center}

table.z{float: center; width: 400px; height:200px; border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-align: center; 		background-color: #bbbbbb}

table.y{float: left; width: 300px; height:500px; border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-align: left; 			background-color: #bbbbbb;padding:10px 3px}

table.t{float: left; width: 300px; height:500px; border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-align: left; 			background-color: #bbbbbb;padding:10px 3px}

img.map{
	border-radius:10px;
	webkit-border-radius:10px;
	-moz-border-radius:10px;width:500px;height:auto}

img.ad{
	border-radius:10px;
	webkit-border-radius:10px;
	-moz-border-radius:10px;width:600px;height:auto}

img.pan{margin-left:5px; border-radius: 6px; border:1px solid black}


img.sasa{margin:-5px 30px ;  margin-left:; position:relative;  top: 0px; border-radius:5px;
	webkit-border-radius:5px;
	-moz-border-radius:5px;width:1
}

img.sasa2{margin:-5px 30px -5px 30px;; position:relative;  top: 0px; border-radius:5px;
	webkit-border-radius:5px;
	-moz-border-radius:5px}



img.grid{width:90%;height:auto;position:inherit}

h2.gridtitle{font-size:21px;position:inherit}

div.form{float: center; width: 300px; height:auto; border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-align: center;padding:10px 3px; font-color:#000000;padding:15px 0px;background: #bbbbbb;border:1px solid black;padding-top:-50px}

label.x{color:black; font-weight: bold;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;line-height: 200%;}

label.y{color:black; font-weight: bold; font-size:20px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;line-height: 80%;position:relative;top:-1px}

label.z{color:black; font-size:16px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;line-height: 100%%;}
	
label.b{color:black; font-size:16px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;line-height: 100%%;}	


  
img.slide{width:250px;height:auto}

img.inv 
	{float:left;width:200px;height:300px}


	 

/* === MENU NORMALIZATION (put at the end) === */
#cssmenu > ul > li.active {
  background: transparent !important;
  margin: 0 !important;
  height: auto !important;
}

#cssmenu > ul > li.active > a {
  color: #ffffff !important;
  background: transparent !important;
}

/* Kill the right-edge divider if you don't want any outline feel */
#cssmenu > ul > li > a:after {
  content: none !important;
  border: none !important;
}

#cssmenu > ul > li > a:hover {
  background: transparent !important; /* no highlight box */
  color: #ae00ff !important;          /* light purple text */
  text-shadow: none !important;       /* removes any subtle glow */
}
div.content,
div.content2,
div.welcome,
div.contentsched {
  border: 1px solid black !important;     /* crisp black border */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); /* subtle glow for contrast */
  border-radius: 18px;                    /* preserve your rounded edges */
}

/* === MAKE MENU WIDTH SCALE LIKE CONTENT === */
#cssmenu {
  
 width: 100%;  
max-width: 1888px;
  min-width: 0px;
  margin: 0 auto;              /* centers the menu */
  border-radius: 0 0 18px 18px;
  border: 2px solid black;
  box-sizing: border-box;
}


/* Match menu width to content width and remove the cap */
#cssmenu {
  width: 100% !important;          /* or use the clamp version below */
  max-width: 1888px !important;     /* remove the 929px clamp */
  min-width: 0px;               /* match your content’s min */
  margin: 0 auto;                 /* keep it centered */
  box-sizing: border-box;         /* consistent box model */
}

#cssmenu {
  height: 40px; /* slightly taller for breathing room */
  line-height: 40px; /* aligns text vertically */
}

#cssmenu > ul > li > a {
  padding: 0 20px;      /* remove top/bottom padding */
  line-height: 40px;    /* centers text perfectly */
  display: inline-block;
  vertical-align: middle;
}

#cssmenu {
  height: 68px;              /* ~70% taller than 40px */
  line-height: 68px;         /* vertically center text */
  border-radius: 0 0 18px 18px;
  box-sizing: border-box;
}

#cssmenu > ul > li > a {
  padding: 0 30px;           /* more breathing room left/right */
  line-height: 68px;         /* matches container for perfect centering */
  font-size: 18px;           /* optional: bump up text size slightly */
  display: inline-block;
  vertical-align: middle;
}

* === Make top image match menu width === */
img.top {
  display: block;
  margin: 0 auto;
  width: 100%;                /* same as #cssmenu */
  max-width: 2222px;         /* optional, same cap as menu */
  min-width: none;          /* same minimum */
  height: auto;              /* keep aspect ratio */
  border-radius: 18px 18px 0 0;
  border: 2px solid #000;    /* matches menu border */
  box-sizing: border-box;
}



/* === Make top image and menu perfectly align === */
#cssmenu{
  width: 100%;
  max-width: 2222px;
  min-width: 881px;
  margin: 0 auto;
  display: block;
  box-sizing: border-box;   /* ensures borders are included in width calc */
}


/* make sure menu border doesn’t push total width beyond the image */
#cssmenu {
  border: 2px solid black;
  padding: 0;
}


/* ===== FINAL WIDTH SYNC FOR TOP IMAGE + MENU ===== */


/* Kill the old hard cap on the menu */
#cssmenu { max-width: none !important; }

/* One set of variables to keep them in lockstep */
:root {
  --frame-w: 100%;
  --frame-max: 2222px;
  --frame-min: 0px;
}


#cssmenu {
  width: var(--frame-w) !important;
  max-width: var(--frame-max) !important;
  min-width: var(--frame-min) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  box-sizing: border-box !important;  /* includes borders in width */
}






/* === MOBILE OVERRIDES (make layout fully readable on phones) === */
@media (max-width: 900px) {
  /* 1) Containers: full width, include padding in width calc */
  div.content,
  div.content2,
  div.welcome,
  div.contentsched {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  /* 2) Top image + menu: match full width on mobile */
  img.top,
  #cssmenu {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3) Menu: stack items vertically and center */
  #cssmenu {
    height: auto !important;
    line-height: normal !important;
    border-radius: 0 0 12px 12px; /* softer on mobile, optional */
  }
  #cssmenu > ul > li {
    float: none !important;
    display: block !important;
  }
  #cssmenu > ul > li > a {
    display: block !important;
    padding: 12px 16px !important;
    line-height: 1.3 !important;
    font-size: 1rem !important; /* adjust to taste */
    text-align: center !important;
  }

  /* 4) Images inside content: never overflow */
  .content img,
  .content2 img,
  img.map,
  img.ad,
  img.bottom,
  img.bottom2,
  img.grid,
  img.slide,
  img.inv {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important; /* fix hard pixel widths */
  }

  /* 5) Tables: allow to shrink instead of overflowing */
  table.z,
  table.y,
  table.t {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 6) Slightly reduce global type if your desktop bump was large */
  html { font-size: 16px !important; }
}

/* 2) Wrapper controls width */
.cont {
  width: 60%;
  max-width: 1440px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 3) Children fill the wrapper exactly */
.cont > .top,
.cont > #cssmenu,
.cont > .content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 4) Kill the old early cap for menu */
#cssmenu {
  max-width: none !important;
}

/* === MID-RANGE MENU WRAP (1200px → 901px) === */
@media (max-width: 1200px) and (min-width: 901px) {
  /* Let the bar grow to contain wrapped items */
  .cont > #cssmenu {
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
  }

  /* Flex container that can wrap */
  .cont > #cssmenu > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(8px, 1.6vw, 16px) !important; /* nice variable spacing */
    margin: 0 !important;
    padding: 8px 0 !important;               /* a bit of vertical breathing room */
  }

  /* Let items wrap; kill floats */
  .cont > #cssmenu > ul > li {
    float: none !important;
    display: flex !important;
    min-width: 0 !important;                 /* allow shrink in flex */
  }

  /* Links: allow wrapping and look balanced on two lines */
  .cont > #cssmenu > ul > li > a {
    display: block !important;
    white-space: normal !important;          /* <-- critical: allow wrap */
    line-height: 1.35 !important;
    padding: 8px 18px !important;
    font-size: 17px;                          /* small tighten so it fits nicely */
  }
}