/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@   navigation list part   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/*----------------------  JAMworks Logo size  ------------------------*/
#JAMworksNaviBarLogo_ID {
  height: 60px;/* height */
}
/*-------------------- menu in the navigation bar --------------------*/
#navigationBarHTML_ID {
  /*border: 2px #4dff00 solid; /* for debug */
  background: rgb(100, 100, 100);/* back ground color */
  display: flex;/* set flex box*/
  justify-content:center;/* centering */
  height: 68px;/* height */
  color: rgb(250, 250, 250);/* font color */
}
@media screen and (max-width: 640px) {/* for smart phone */
  #navigationBarHTML_ID {
    height: 80px;/* height */
  }
}
#navigationBarHTML_ID > div {
  /*border: 2px #0044ff solid; /* for debug */
  display: flex;/* set flex box*/
  align-items: center;
  
  /* (!) select 1 to set vertical alignment from here */
  /*justify-content: space-around;/**/
  justify-content: space-between;/**/
  /*justify-content:flex-end;/**/
  /*justify-content:center;/**/
  /*justify-content:flex-start;/**/

  width: 90%;/* width */
}
#navigationBarHTML_ID > div > span {
  border: 0px #ff6f00 solid; /* for debug */
}
.naviLists_class {
  /*border: 2px rgb(0, 204, 255) solid;/* for debug */
  background: rgb(99, 99, 99);/* back ground color*/
  /*width: 60%;/* width */
  display: flex;/* to be flex box */
  justify-content: space-between;/**/
}
@media screen and (max-width: 640px) {
  .naviLists_class {
    /*border: 2px rgb(0, 204, 255) solid;/* for debug */
    display: none;/* hide */
  }
}
.naviList_class {
  border: 0px rgb(255, 111, 0) solid;/* for debug */
  /*padding: 10px 10px 10px 10px;/**/
  /*margin: 10px 0px 10px 0px;/**/
}
.naviDropDownTop_class {
  /*border: 2px rgb(0, 190, 38) solid;/* for debug */
  color: rgb(250, 250, 250);/* font color */
  padding: 10px 10px 10px 10px;/**/
}
.naviDropDownElements_class {
  border: 3px rgb(74, 74, 74) solid;/* for debug */
  background: rgb(99, 99, 99);/* back ground color*/
  display: none;/* hide in the begining */
  position: absolute;/* not to be include navigation bar's box. static/relative/absolute/fixed/sticky */
  padding: 20px 20px 20px 20px;/**/
  border-radius: 4px; /*  */
}
.naviList_class:hover .naviDropDownElements_class {
  display: block;/* show on the navigation bar */
}
.naviDropDownElement_class {
  /*border: 2px rgb(190, 0, 0) solid;/* for debug */
  padding: 5px 0px 5px 0px;/**/
}
/*-- a tag --*/
.naviLists_class a {
    outline: none;
    text-decoration: none;
    padding: 0px;
}
.naviLists_class a:link {color: #ffffff;}/* link color */
.naviLists_class a:visited {color: #ffffff;}/* visited link color */
.naviLists_class a:focus {
  border-bottom: 1px solid;
  background: #e2e2e2;
}
.naviLists_class a:hover {
  color: #626262;/* font color when cursol is on it */
  border-bottom: 1px solid;/* under line when cursol is on it */
  background: #c1c1c1;/* back ground color when cursol is on it */
}
.naviLists_class a:active {
  background: #dadada;
  color: #bebebe;
}
/*---------------------  humberger menu button ------------------------*/
.hamburgerMenu_class {
  display: none;/* hide hunberger menu in the begining */
}
@media screen and (max-width: 640px) {/* for smart phone */
  .hamburgerMenu_class {
    display: flex;/* hide hunberger menu in the begining */
  }
}
.menuBtn_class {
  border: 2px rgb(250, 250, 250) solid;/* for debug */
  position: fixed;/**/
  top: 15px;/* distance from the top */
  right: 15px;/* distance from the right */
  display: flex;/**/
  height: 50px;/* height size of humgerger menu box */
  width: 50px;/* height size of humgerger menu box */
  justify-content: center;/* centering hrizontal */
  align-items: center;/* centering vertical */
  z-index: 90;/* layer depth. bigger number is more front. */
  background-color: rgb(100, 100, 100);/* back ground color */
  border-radius: 5px;/* how the bar corner rounded */
}
.menuBtn_class span,/* span tag */
.menuBtn_class span::before,
.menuBtn_class span::after {
  /*border: 2px rgb(38, 255, 0) solid;/* for debug */
  content: '';/**/
  display: block;/* hide */
  height: 3px;/* thickness of the middle bar */
  width: 25px;/* width of the middle bar */
  border-radius: 3px;/* how the bar corner rounded */
  background-color: #ffffff;/* 3 lines' color */
  position: absolute;/* position to be absolute */
}
.menuBtn_class span:before {
  bottom: 8px;/**/
}
.menuBtn_class span:after {
  top: 8px;/**/
}
#menuBtnCheck_ID:checked ~ .menuBtn_class span {
  background-color: rgba(255, 255, 255, 0);/**/
}
#menuBtnCheck_ID:checked ~ .menuBtn_class span::before {
  bottom: 0;/**/
  transform: rotate(45deg);/**/
}
#menuBtnCheck_ID:checked ~ .menuBtn_class span::after {
  top: 0;/**/
  transform: rotate(-45deg);/**/
}
#menuBtnCheck_ID {
  display: none;/* hide check box */
}
/*------------------ humberger mune pannel ------------------*/
.menuTitle_css{
  /*border: 2px rgb(0, 154, 181) solid;/* for debug */
  text-align: center;/**/
  font-size: 2.0em;/**/
  padding: 50px 0px 0px 0px;/**/
  color: rgb(250, 250, 250);/* font color */
}
.menuContents_class {
  /*border: 4px rgb(181, 0, 0) solid;/* for debug */
  width: 100%;/**/
  height: 100%;/**/
  position: fixed;/**/
  top: 0;/* from top */
  right: 100%;/* from right */
  z-index: 80;/* layer depth */
  background-color: rgb(90, 90, 90);/* back ground color */
  font-size: 1.5em;/* font size */
  /*transition: all 0.1s;/* setting for animation */
}
#menuBtnCheck_ID:checked ~ .menuContents_class {
  right: 0;/* move the menu pannel out to a outside of the screen. */
}
.menuContent_css{
  /*border: 2px rgb(55, 255, 0) solid;/* for debug */
  margin: 30px 0px 30px 30px;/**/
  color:rgb(250, 250, 250);/* font color */
}
.menuContentChildren_css{
  /*border: 2px rgb(255, 102, 0) solid;/* for debug */
  margin: 0px 0px 0px 30px;/**/
}
.menuContentChildren_css > div{
  /*border: 2px rgb(0, 30, 255) solid;/* for debug */
  margin: 20px 0px 20px 30px;/**/
  color:rgb(250, 250, 250);/* font color */
}
/*-- a tag --*/
.menuContent_css > div > a,
.menuContentChildren_css > div > a {/* usual */
  outline: none;/**/
  /*text-decoration: none;/**/
  padding: 0px;/**/
}
.menuContent_css > div > a,
.menuContentChildren_css > div > a {/* link color */
  color:rgb(250, 250, 250);/* font color */
}
.menuContent_css > div > a,
.menuContentChildren_css > div > a {/* visited link color */
  color:rgb(250, 250, 250);/* font color */
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/